Boardunity & Video Forum - Schmutziges WYSIWYG-HTML umwandeln in XHTML?

Boardunity & Video Forum (https://boardunity.de/)

- Programmierung und Datenbanken (https://boardunity.de/programmierung-datenbanken-f23.html)

- - Schmutziges WYSIWYG-HTML umwandeln in XHTML? (https://boardunity.de/schmutziges-wysiwyg-html-umwandeln-xhtml-t2127.html)

Schmutziges WYSIWYG-HTML umwandeln in XHTML?

Hi Leutz,

wollte mal fragen, ob jemand eine Funktionssammlung oder eine Klasse für PHP kennt, mit der sich WYSIWYG-HTML, welches ja besonders im MSIE nicht gerade sauber aussieht, in XHTML umwandeln lässt.

Habe bisher nur Klassen gefunden, mit denen sich das noch schlimmer aussehende MS Word-HTML halbwegs säubern lässt, aber nichts, um alles komplett umzuwandeln. Irgendwie muss das ja gehen, immerhin schfft es das vB3 ja auch!

Ich bräuchte das Ganze für eine von mir entwickelte Software, die vorraussichtlich einen WYSIWYG-Editor einsetzen wird und ich fände es ziemlich sinnlos, für valides XHTML in den Templates zu werben, wenn die Ausgabe der Benutzereingabe nicht valide wären.

Ich glaube die Klasse, die ich für den XMentor geschrieben habe macht das einigermaßen brauchbar.
Ansonsten kann ich dir noch eine Anbieten, die den HTML-Code in BBCodes umwandelt. ;)
Die setze ich bei meinem Board ein.

Das Probleme kenne ich auch :(

Hatte erst gedacht, dass Textpattern sowas drin hat aber es hat nur die Klasse Textile >textism.com< drin.

Ich arbeite zur Zeit an einem WYSIWYG-Editor, der für Mozilla-basierte Browser so gut wie fertig ist und nur noch den letzten Feinschliff benötigt. Die IE-Version ist etwas komplizierter zu entwickelnt, wenn man kein Windows auf dem Rechner hat, kommt aber auch.

Dafür sitze ich gerade an einer Klasse, die das HTML-Gewurschtel was die Browser fabrizieren in BB-Codes und anschließend in XHTML umwandelt. Der Mozilla hält sich größtenteils an die Standards, was man vom IE hingegen nicht behaupten kann.

Naja, lange Rede, kurzer Sinn: Wenn ich Zeit finde, an der Klasse weiter zu arbeiten und sie unabhängig vom nBB einsetzbar ist werde ich hier Bescheid geben. Der jetzige Stand macht noch einige Probleme bei komplexen, verschachtelten Formatierungen, außerdem ist der Umweg über BB-Codes nicht optimal und sollte optional sein.

Das Problem - besonders beim IE - ist ja hauptsächlich, aus dem ganzen (Pseudo-)HTML die benötigten Tags und Attribute rauszufiltern und in valides XHTML umzuwandeln.

Wer bastelwütig ist dem kann ich gerne ein paar Hinweise geben, wie ich es umgesetzt habe, oder die jetzige (noch nicht wirklich funktionstüchtige) Version schicken. Eine komplett fertige, rundum-sorglos-und-zufrieden-Lösung habe ich aber leider (noch) nicht.

Die Klasse, die beim XMentor eingesetzt wird erzeugt soweit ich das in Erinnerung habe durchaus validen Code - trotzdem würde ich gerne mal deine Lösung betrachten (@naggel).

Beim IE muss man besonders folgendes beachten: Der IE liebt es, ein einzusetzen, wo Gecko nur ein einbaut. Wenn ich es richtig in Erinnerung habe setzt IE beides ein. Bei mir im Board (da ist der WYSIWYG-Editor vom XMentor eingebaut) habe ich es so gelöst, dass " " mit "\n" ersetzt wird und komplett rausgelöscht wird.
Ich selbst kann bei meiner html2bbcode-Variante nur noch einen Fehler finden (manche Leerzeichen verschwinden ungefragt), wobei ich nur einfache HTML-Tags eingebaut habe.

Ich bin seit einiger Zeit auch auf der Suche nach einer solchen Klasse. :)
@TheDragonMaster: Könntest du mir evtl. mal beide Varianten schicken?
Also sowohl die HTML2BBcode- als auch die HTML2XHTML-Variante?
Und mit welchen Browsern funktioniert dies bis jetzt?

Bis dann,

codethief

Je nachdem wo und wie du es einsetzen willst, könntest du einfach tidy nehmen:
http://de.php.net/manual/de/ref.tidy.php

Das Problem ist, dass ich ein Open-Source-CMS code und die libtidy schließlich nicht voraussetzen kann. :(

Sorry, dass ich das Thema nochmals pushe, aber ich brauche nun dringendst eine solche Klasse.

Zitat:

Zitat von codethief

@TheDragonMaster: Könntest du mir evtl. mal beide Varianten schicken?
Also sowohl die HTML2BBcode- als auch die HTML2XHTML-Variante?
Und mit welchen Browsern funktioniert dies bis jetzt?

Ich poste den BBCode-Kram nachher oder morgen. Je nachdem, wann ich wieder an meinen eigenen PC komme (kleine Schwester sucht Handy-Sprüche um ihre Karte sinnlos zu leeren...).
Die HTML2XHTML-Variante kannst du beim X-Mentor finden.

Hi.

Ich bräuchte auch sowas ^^

MfG MaMo

Und in welcher Datei beim X-Mentor ist diese geniale Funktion versteckt? :)
Darf ich diese Funktion auch in mein eigenes CMS einbauen (welches ich zwar nicht vermarkten aber als OpenSource-Download anbieten werde)?

Es ist AFAIK nur eine minimale Sache (die könnte noch fehler haben). Versteckt in der validxhtml-Datei. ;)
Entfernt zuverlässig font-tags und wandelt leere in die korrekte (neue) Form.
Für einen WYSIWYG-Editor wie im X-Mentor ist das ausreichend.

Danke, aber damit hast du mir immer noch nicht meine Frage beantwortet:

Zitat:

Zitat von codethief

Darf ich diese Funktion auch in mein eigenes CMS einbauen (welches ich zwar nicht vermarkten aber als OpenSource-Download anbieten werde)?

;)

Die Frage wird dir bei der Installation des X-Mentors beantwortet. ;)
(Und auf der Webseite, und der Dokumentation, und und und. ;) )

X-Mentor steht unter GPL, solange du dich an die hälst sehe ich kein Problem.

So... hier nun der Parser, den ich bei meinem Board einsetze, um das HTML, dass der WYSIWYG-Editor ("DragonEdit" - ist auch im X-Mentor enthalten) erstellt, in BBCodes umzuwandeln.
Funktioniert dort einwandfrei (IE + Gecko):

PHP-Code:

   <?php
 class DragonEdit {
     var $search, $replace;
     function DragonEdit() {
         $this->search  = array(
             '`<b>(.*?)</b>`is',
             '`<u>(.*?)</u>`is',
             '`<i>(.*?)</i>`is',
             '`<s>(.*?)</s>`is',
             '|<strong>(.*?)></strong>|i', // IE
             '|<em>(.*?)</em>|i',         // IE
             '|<font([^>]*)>(.*?)</font>|ies',
             '|<div([^>]*)>(.*?)</div>|ies',
             '|<a([^>]*)>(.*?)</a>|ies',
             '|<img([^>]*)>|ies',
             '`<(o|u)l>(.*?)</\\1l>`ies',
             '|<br(.*?)>|i',
             '`<p>(.*?)</p>`i'
         );
         $this->replace = array(
             '[b]\\1[/b]',
             '[u]\\1[/u]',
             '[i]\\1[/i]',
             '[s]\\1[/s]',
             '[b]\\1[/b]',
             '[i]\\1[/i]',
             '$this->fontTag(\'\\1\', \'\\2\')',
             '$this->align(\'\\1\', \'\\2\')',
             '$this->link(\'\\1\', \'\\2\')',
             '$this->img(\'\\1\')',
             '$this->_list(\'\\1\', \'\\2\')',
             "\n",
             "\\1\n"
         );
     }
     
     function parse($str) {
         $str = preg_replace('`(?<!<br>)\n(?!<br>)`', ' ', $str);
         $str = preg_replace("`[\n\r]`", '', $str);
         $str = preg_replace($this->search, $this->replace, $str); // We need to repeat this
         $str = preg_replace($this->search, $this->replace, $str);
         $str = preg_replace($this->search, $this->replace, $str);
         $str = preg_replace($this->search, $this->replace, $str);
         $str = str_replace(array('&lt;', '&gt;', '&amp;', '&nbsp;'), array('<', '>', '&', ' '), $str);        
         return $str;//strip_tags($str);
     }
     
     function _list($param, $plain) {
         if($param == 'u') {
             $mod = '';
         } elseif($param == 'o') {
             $mod = '=1';
         }
         $plain = preg_replace('`<li>(.*?)</li>`', "[*]\\1\n", $plain);
         return '[list'.$mod."]\n".$plain.'[/list]';
     }
 
     function img($param) {
         $param = str_replace('\\\\', '', $param); // Strip unnessesary slashes
         if(preg_match('`src=(["\'])([^\\1]*)\\1`i', $param, $pattern)) {
             $plain = '[img]'.$pattern[2].'[/img]';
         }
         return $plain;
     }
     
     function link($param, $plain) {
         $param = str_replace('\\\\', '', $param); // Strip unnessesary slashes
         if(preg_match('`href=(["\'])([^\\1]*)\\1`i', $param, $pattern)) {
             $plain = '[url='.$pattern[2].']'.$plain.'[/url]';
         }
         return $plain;
     }
     
     function align($param, $plain) {
         $param = str_replace('\\\\', '', $param); // Strip unnessesary slashes
         if(preg_match('`align=(["\'])([^\\1]*)\\1`i', $param, $pattern)) {
             if($pattern[2] == "center") {
                 $plain = '[center]'.$plain.'[/center]';
             } else {
                 $plain = '[align='.$pattern[2].']'.$plain.'[/align]';
             }
         }
         return $plain;
     }
     
     function fontTag($param, $plain) {
         $param = str_replace('\\\\', '', $param); // Strip unnessesary slashes
         if(preg_match('`face="([^"]*)"`i', $param, $pattern)) {
             $plain = '[font='.$pattern[1].']'.$plain.'[/font]';            
         }
         if(preg_match('`size="([^"]*)"`i', $param, $pattern)) {
             $plain = '[size='.$pattern[1].']'.$plain.'[/size]';
         }
         if(preg_match('`color="([^"]*)"`i', $param, $pattern)) {
             $plain = '[color='.$pattern[1].']'.$plain.'[/color]';
         }
         return $plain;
     }
 }
 ?>

Bedienung ist denkbar simpel:

PHP-Code:

   $parser = new DragonEdit();
 $txt = $parser->parse($txt);

@TheDragonMaster: Gefällt mir. Willst du ein Copyright sehen, sofern ich den Code in einer Software verwende?

Hm, schaut gut aus. :) Langt es i.A. eigentlich, solche (c)-Vermerke in einem eigenen Doku-Kapitel zu sammeln? Mit nem zusätzlichen Link von meinem eigenen Lizenz-Vermerk aus?

In meinem Fall hätte ich oberhalb des Codes eine Copyright-Notiz anbringen sollen. Diese hätte dann auf jedenfall erhalten bleiben müssen (dort, wo sie stand).
Ob das nun irgendwo in einer Doku steht oder nicht spielt dabei dann keine Rolle.

Ansonsten kommts halt immer auf die Lizenz an, unter der der Code steht. (Der oben steht "ab sofort" unter GPL - muss nur noch den Kram hinzufügen... *g*)