[DHTML, PHP] content editor beperken

[maartenvdv737]

Op dit moment hebben gebruikers van mijn site de mogelijkheid met een content editor een html tekst in een database te gooien. Dit werkt prima en de gebruiker is heel vrij (wat ook moet). Het probleem is dat de database nu al 18gb is en steeds groter wordt. De gebruikers copy&pasten de meest ranzige html in de editor, met de meest overbodige tags e.d.

Nu ben ik dus aan het rond zoeken om naar de verschillende mogelijkheden. De eisen:

- De gebruiker moet een eigen pagina kunnen opmaken en deze met zoveel mogelijk vrijheid bewerken, plaatjes en kleurtjes toevoegen en deze rangschikken in de layout.
- De grootte moet sterk beperkt blijven.

Ik heb al het een en ander geprobeerd met HTML tidy, en dan stylesheets maken en bepaalde tags eruit filteren met strip_tags() van PHP. Het probleem is dat de layout hieronder vaak leidt en het resultaat na het opslaan niet meer hetzelfde is.
Daarom denk ik dat het probleem beter bij de invoer ondervangen kan worden. Nu wil ik gebruikers liever niet beperken in copy & paste, omdat dit ten koste kan gaan van de creativiteit.


Heeft er iemand ideeen?

[raps]

BBcode?
Je hebt net zelf op deze manier gepost...

[maartenvdv737]

ja, bbcode is leuk, maar niet gebruikersvriendelijk. Bovendien biedt het de gebruiker niet de vrijheid die ik wil geven. Het gaat hier niet om een klein beetje layout rondom een tekst, maar om een volledig creatieve layout met tekst daarin.

[Verwijderd]

Misschien kun je in plaats van opschonen/inkrimpen de HTML-code gezipped in de database zetten. Dat zal best wat ruimte schelen denk ik. De CPU van de server wordt dan wel meer belast.

[Michali]

Je zult toch echt de html moet gaan analyseren en zelf een filter schrijven. Ik heb eens gezocht naar een Word HTML filter oid. maar ik heb weinig kunnen vinden.

[Woudloper]

Heb je al eens gekeken naar de bestaande Richt Text Editors (zoals FCK Editor) of zij deze door jouw gezochte functionaliteit hebben?

Verder kan je natuurlijk eenvoudig middels UBB Code heb editen beperken, maar dan moet je een eigen stukje regex schrijven die het pasten vanuit wordt ondersteund. In zo'n geval kan je meteen de niet gewenste opmaak er ook nog uitfilteren...

[maartenvdv737]

tja, HTML Tidy, die standaard in PHP5 zit is 1 van de beste naar ik meen. Maar is nog steeds te beperkend.

Misschien moet ik de gebruiker de mogelijkheid geven wel dingen in de editor te pasten, maar vervolgens slechts een aantal tags toe te staan met een javascript strip_tags() functie. De gebruiker kan dan zien dat de layout niet zo is als hij wil, en kan vervolgens mij de functies van de content editor dit bijwerken. De editor zelf genereert namelijk wel goede code.

Veel bagger code wordt trouwens gepast vanuit WORD volgens mij.

[GlowMouse]

18GB is tienmaal zoveel als dat er in de huidige engelse wikipedia zit. Met filtering haal je misschien wat overhead weg, maar het blijft ontzettend veel tekst.

Waarvoor wordt de tekst gebruikt? Misschien kun je een drop-down menu bijvoegen waarbij de bezoeker kan beslissen hoelang iets erop moet blijven staan. Is het om even aan een vriend te laten zien zet hij het op een dag, en daarna ben je ervanaf. Als maximumsetting doe je dan iets dat imageshack ook heeft: zodra het een jaar niet is bekeken gooi je het eraf. Dat is dan direct een oplossing voor de 18GB die er al inzit.

[MarkvE]

Ik heb eens gekeken naar de tagsoep die je krijgt wanneer je vanuit Word paste naar een contentEditable. En het zijn voornamelijk span en font tags met verschrikkelijke MS-attributen die voor de talloze onnodige kb's zorgen (echt niet normaal). Echter denk ik wel dat dit vrij simpel te filteren is. Wellicht kun je het zoals Blogger.com doen, die filteren alle foute HTML codes eruit wanneer de gebruiker iets in het contentEditable plakt. Dit is mogelijk via wat Regexes in Javascript.

[maartenvdv737]

Goed, om even terug te komen op dit topic.

Ik heb een aantal opties geprobeerd, waaronder HTML tidy, maar ook afvangen met javascript.
Mijn conclusie is dat het niet mogelijk is de layout te behouden en toch de code kleiner te maken met deze tools.

Daarom ben ik nu aan het kijken of ik met wat slimme trucs de code toch kan verkleinen.

- whitespace wegfilteren
- dubbele tags verwijderen
- scripts verwijderen
- iframe's verwijderen

Ik zit nu met het puntje dubbele tags.

Een voorbeeldje van een deel van een html invoer staat hier:
http://www.ai.rug.nl/~mjvdveen/test.txt

Zoals je ziet zijn er erg veel overbodige tags. Dit bestandje is 80kb, op een html file van 320kb. Er valt dus een behoorlijke winst te behalen door alle dubbele overbodige tags te verwijderen.

Nu ben ik niet zo'n held met regexp, maar het lijkt me dat het mogelijk moet zijn om de dubbele openende en sluitende tags te verwijderen uit de string.

Iemand een idee?

[We Are Borg]

Dit is dwijlen met de kraan open Ik had dit probleem ook (op een kleinere schaal) en heb uitgelegd dat ze eerst de tekst naar kladblok moesten kopieren (html + opmaak weg) en opnieuw moesten opmaken d.m.v. de editor die Woudloper al heeft gelinkt. Jij kan wel heel knap oplossingen gaan zoeken, maar het probleem zit aan de user kant. Zij veroorzaken dit

[Verwijderd]

Ik heb ooit in JavaScript een methode geschreven voor mijn editor om alle Word overhead eruit te halen. Die werkt prima...
Gewoon de meest krankzinnige Word document maken, en kijken welke attributen etc overhead is en hoe je van alle font en span tags af kan komen.
Heb ook een methode striptags geschreven die je aanroept als:

JavaScript:

sHTML = striptags(sHTML, ['font', 'b', 'i', 'u', 'em', 'strong', 'sup', 'sub', 'strike']);

Veel werk, maar het eindresultaat gaat goed. Je moet dus een parser schrijven die alle meuk eruit filtert.

[Verwijderd]

maartenvdv schreef op zondag 23 januari 2005 @ 12:15:
...

Ik zit nu met het puntje dubbele tags.

Een voorbeeldje van een deel van een html invoer staat hier:
http://www.ai.rug.nl/~mjvdveen/test.txt

Zoals je ziet zijn er erg veel overbodige tags. Dit bestandje is 80kb, op een html file van 320kb. Er valt dus een behoorlijke winst te behalen door alle dubbele overbodige tags te verwijderen.

Nu ben ik niet zo'n held met regexp, maar het lijkt me dat het mogelijk moet zijn om de dubbele openende en sluitende tags te verwijderen uit de string.

Iemand een idee?

Heb ook een JavaScript tokenizer die retesnel een HTML string inleest en er een array van maakt. Dit omdat het DOM corrupt is als de nesting verkeerd is. Aangezien je van Word wel kan verwachten dat de nesting correct is - ondanks alle HTML tag soep - kan je ook gewoon een innerHTML gebruiken en vervolgens het DOM doorlopen en nodes eruit gooien en onnodig zijn. De logica daarvoor mag je zelf bedenken

[Thijsmans]

Goed, die .txt is idd knap waardeloos

Wat je moet doen:

• FONT-tags strippen (= depricated in Html 4.01) (regexp: /<font([^>]?>/ oid), </font> wegreplacen
• & nbsp; vervangen voor ' ', opmaken (inspringen) doe je niet met & nbsp; maar met css
• Dubbele openingstags achter elkaar wegregexpen

En mag ik vragen waarmee de content in hemelsnaam is gemaakt Er staat tientallen keren die span 'headline1' (waar ik overigens ook mijn twijfels over heb, is dit niet beter te vervangen voor <h1> (aangenomen dat ze dezelfde functie hebben), gezien dit semantisch correcter is

[ Voor 20% gewijzigd door Thijsmans op 23-01-2005 15:51 ]

[Erycius]

Wij hadden dat probleem ook met onze ECTS (niet de gamesbeurs, wel de Europese standaard om info over opleidingen te tonen) editor. We voorzagen een optie om zelf een tekst te schrijven en die opte maken mbv de FCK Editor (die van je textarea een krachtige texteditor maakt) in de databees te zwieren. Nu, veel proffen copy/pasten gewoon de tekst die ze al in MS Word hadden daarin, en dat zorgt natuurlijk voor de nodige rommel in de HTML tags.

Wat wij dan gedaan hebben is een optie van FCK Editor aangezet: je kan namelijk in het configuratiebestand kiezen voor "paste as plain text only" dus zelfs al Ctrl-C je je hele Word document, bij het plakken in de editor komt er enkel de tekst over, ZONDER opmaak, en dus ook ZONDER rommel. Met behulp van de knoppen van de editor kunnen ze dan wel nog voor opmaak zorgen, maar enkel dan op een manier die wij zelf in de hand hebben. Wij kiezen zelf de knoppen die beschikbaar zijn ("Nee hoor, jullie hebben heus geen img's nodig!" ) en zo blijft onze databees dus mooi proper, en onze frontend heeft er ook nog nooit zo mooi uitgezien, omdat WIJ als admins de CSS opleggen, en beslissen welke opmaak er kan gebruikt worden. Dat is wat jij nodig hebt denk ik.

Hoe je de rommel die al in de database zou opkuisen weet ik nog zo meteen niet. Daar is HTML tidy mss meer geschikt voor.

[maartenvdv737]

Opzich kan ik me in alle suggesties vinden. Het probleem is dat onze gebruikers kinderen zijn in de leeftijdsgroep 4 tm 18. Het enige dat ze kunnen is heel veel layout knippen en plakken van elkaar en dat rechtstreeks in de editor dumpen.

Alle tags eruit filteren is geen punt, maar de gebruikers zijn gewoon niet allemaal in staat om het daarna weer netjes op te maken.

Op dit moment lijkt het erop dat ik alleen iframe, script, <span> eruit filter. ook het woord javascript en alle on....="javascript zooi" wordt eruit gemikt.

Het blijft een probleem helaas...

[Verwijderd]

Wij gebruiken een editor met 'n 'paste from word' functie die de code omzet naar normale html-tags.

[ Voor 8% gewijzigd door Verwijderd op 23-01-2005 16:27 . Reden: typo ]