‚Seite Bearbeiten‘ goes WYSIWYG
Code & Blog Logo
Das CMS soll natürlich nicht nur für Informatiker sein. Auch nicht Informatiker, die kein HTML können sollen damit arbeiten können. Also gibt es heute die WYSIWYG Komponente in unseren CMS.
Aber was ist eigentlich WYSIWYG? Ganz einfach: What You See Is What You Get – Was du siehst ist, was du bekommst.
Als WYSIWYG-Editor nehmen wir TinyMCE (der wird unter anderen auch bei WP verwendet). Dort brauchen wir das Main package. Der Inhalt aus dem Ordner tinymce/jscripts/tiny_mce aus dem Zip-Archiv kommt bei unserem CMS in den Ordner /system/WYSIWYG.
UPDATE 26.10.2010: Offenbar ist die neuste Version nicht mehr kompatibel mit unserem CMS, leg bitte das in den WYSIWYG-Ordner.
Nun kommt der Einbau in unser CMS. Der Editor ist so aufgebaut, dass man nur ein JavaScript-Script einbauen muss.
Ich hab mal das Beispiel ein bisschen angepasst, so dass nicht zu viele Einträge im Menü sind. So sieht dann der Code im /admin/includes/site-edit.php aus (heute einmal ohne Syntax-Highlighting):
<input name="alias" value="<?PHP echo $page->alias; ?>" /><br />
<label for="content" />Inhalt</label>
<script type="text/javascript" src="/system/WYSIWYG/tiny_mce.js"></script>
<script type="text/javascript">
<input name="alias" value="<?PHP echo $page->alias; ?>" /><br />
<label for="content" />Inhalt</label>
<script type="text/javascript" src="/system/WYSIWYG/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,
emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,
print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,
nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,
justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,
indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,
forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,visualaid,|charmap,|,fullscreen,spellchecker,|,visualchars,template,blockquote,|,
insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "template_list.js",
external_link_list_url : "link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<textarea name="content"><?PHP echo $page->readContent("../"); ?></textarea>
</div>
Jetzt sollte beim ‚Seite Bearbeiten‘ schon etwas zu sehen sein. Öffnen man aber nun einen Dialog, z.B. zum Tabelle einfügen, dann kommt man auf die Startseite des CMS.
Das liegt daran, dass wir alle .htm Dateien in der .htaccess im Hauptverzeichnis umleiten. Hier müssen wir nun leider auf .html zurückgreifen, so dass die neue .htaccess so aussieht:
RewriteEngine on RewriteCond %{REQUEST_URI} /(.*).html RewriteRule (.*) /index.php?include=%1
Jetzt gibt es natürlich ein paar kleine Fehler im CMS. Zum einen müsst Ihr jetzt in allen Menüs die ihr gemacht habt die .htm in .html umwandeln.
Und die BreadCrump-Methode der Klasse sys (system/sys.php) muss noch geändert werden:
... function displayBreadcrump($separator,$class,$idpraefix){ global $currentpage; $i = 1; $breadcrump = $currentpage->getBreadcrump(); while($i <= count($breadcrump)){ echo "<a href="".$breadcrump[$i-1][0].".html" class="".$class."" id="".$idpraefix.$i."">".$breadcrump[$i-1][1]."</a>"; if($i < count($breadcrump)){ echo $separator; } $i++; } } ...
Solltet ihr noch weitere Stellen finden, wo es jetzt kracht lasst es mich wissen 😉 Was ich schon gefunden hab ist, dass im WYSIWYG die Rechtschreibprüfung noch nicht funktioniert. Das kommt aber dann demnächst.
Dies ist ein Beitrag aus der Aktion Code & Blog, in der hier ein eigenes CMS erstellt wird./span
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Kommentare
gentle.rocker schrieb am 10.08.2009:
Ich wusste gar nicht, dass es noch so etwas wie WYSIWYG gibt; als ich vor 10 Jahren html angefangen habe, da ist mir das mal untergekommen - aber jetzt?
Stefan Wienströer schrieb am 10.08.2009:
Ich benutz die eigentlich auch nicht (außer für WP). Nur das CMS soll auch für Leute sein, die nicht entwickeln können.
Daniel Busch schrieb am 26.08.2009:
@ gentle.rocker Äh und wie denkst Du funktioniert Dreamweaver und Konsorten. MfG Daniel
erxxlu schrieb am 06.04.2010:
Wenn ich den Code der site-edit.php kopiere bekomme ich im Textfeld einen Fatalerror angezeigt... Fatal error</b>: Call to a member function readContent() on a non-object in C:xampphtdocscmsadminincludessite-edit.php on line 47
Stefan Wienströer schrieb am 06.04.2010:
Hast Du evtl. den Anfang der site-edit.php abgeschnitten / diesen Artikel überlesen? http://blog.stevieswebsite.de/2009/07/datenbank-daten-bei-seite-bearbeiten-verwenden/
Hannes schrieb am 15.06.2010:
Hi, ich habe ein Problem: im FireFox läuft alles problemfrei, im Opera kommt aber diese Fehlermeldung: JavaScript - http://localhost/cms/admin/index.php?page=site-edit&site=index Inline script compilation Syntax error at line 1 while loading: <!DOCTYPE html PUBLI ^ expected expression, got '<' Kannst du mir da helfen? Der Browser scheint zu denken, die ganze Datei wäre Javascript... MfG, Hannes
Hannes schrieb am 15.06.2010:
Hi nochmal, ich habe gerade noch einen Fehler entdeckt. Wenn ich im Firefox die Seite mit tiny_MCE bearbeite und dann abspeichere, fügt er vor jeden Paragraphen ein rn ein. MfG, Hannes
Stefan Wienströer schrieb am 15.06.2010:
muss ich mir mal näher ansehen.
Hannes schrieb am 23.06.2010:
Der Fehler ist inzwischen behoben, woran es lag weiß ich leider nicht, aber da ich mir den ganzen code versaut habe, hab ich mir einfach den nächsten einstiegspunkt runtergeladen und da funzt alles.
Dieter schrieb am 01.07.2010:
Hallo Stefan, darf ich hier nochmal kurz einsteigen, da ich gerade ein ähnliches Problem habe wie Hannes. Nach dem Bearbeiten und neu Speichern einer Seite wird der gesamte Inhalt im neuen File in eine Zeile geschrieben. Anstatt der Zeilenumbrüche erscheint im Text lesbar die Zeilen und Absatzendmarke /r/n. Eingefügte bilder werden nicht mehr eingelesen da im html text for jedes quote " ein slash eingefügt wird und der Browser es so folglich nicht mehr als html erkennt. Das Ganze läuft bei mir noch probeweise auf dem Rechner mit wampserver auf Windows XP 2. WYSIWYG habe ich weggelassen, da das Ändern von Haupttextelemente durch Websiteuser nicht geplant ist. Ich würde mich da über eine Idee sehr freuen. Gruß Dieter
Stefan Wienströer schrieb am 02.07.2010:
Welchen Browser benutzt Du denn?
Dieter schrieb am 02.07.2010:
Ich benutze hauptsächlich Firefox 3.6 und Internet explorer 6. Das Problem taucht in beiden Browsern auf.
Dieter schrieb am 02.07.2010:
Hallo Stefan, habe gerade noch ein bisschen herumgespielt und herausgefunden, daß OPERA das gleich produziert. Nach dem Bearbeiten einer Seite kommt dann folgendes zustande. rnÜberschriftrnHier kommt\'s dann mit ein bisschen text und alles ohne Zeilenumbruchrn Als Editor benutze ich Webocton Scriptly.
Stefan Wienströer schrieb am 03.07.2010:
Habs in den Issue-Tracker gepostet.
Dieter schrieb am 04.07.2010:
Danke, wäre cool Du mich wissen läßt wenn ihr etwas heraus findet.
eddi schrieb am 20.10.2010:
Hmmm. Ich krieg das Ding einfach nicht eingebunden. Habe jetzt mal die site-edit ausm nächsten Einstiegspunkt genommen. Klappt auch nicht. Sieht aus wie vorher. Jetzt müßte doch so ne Art Editor kommen. Im Browser ist Javascript eingeschaltet. Firefox 3.6.10. Nutze Xampp. muss da vielleciht etwas frei schalten? Aber Javascript wird doch Clientseitig ausgeführt. Hat noch irgendwer das Problem, oder besser noch, schon gelöst?
eddi schrieb am 20.10.2010:
Habe jetzt mal nen Debugger drüber laufen lassen. Er beschwert sich bei der Stelle tinyMCE.init -> Reference Error Er kann die Variable nicht finden. Hmm. Habe es auch schon mit dem absoluten Pfad probiert. Ich hoffe mir kann wer weiterhelfen.
Stefan Wienströer schrieb am 20.10.2010:
Kannst mal den Quelltext der Seite (vom Browser aus) mir per Mail zukommen lassen? Adresse steht im Impressum: http://stevieswebsite.de/impressum/
Daniel schrieb am 24.10.2010:
Also wenn ich den Quelltext als html-Datei speichere und ausführe kommt dabei eine Seite aus dem alten Dashboard raus. Bei mir im Browser (IE, FF, Firefox) keine Probleme.
Andre schrieb am 25.10.2010:
Also bei mir ist er auch nicht eingebunden. Habe zusätzlich mal probiert obs mit der datei aus dem nächsten einstiegspunkt funktioniert. Hier geht es auch nicht. Dazu kommt noch das ich nicht speichern kann. Er speichert bei mir nichts sondern löscht alles aus der datei raus. Dann kommt ein fehler <b>Warning</b>: fread() [<a href='function.fread' rel="nofollow">function.fread</a>]: Length parameter must be greater than 0 in <b>/var/www/virtual/genhost.de/gtacp/htdocs/system/classes/page.php</b> on line <b>52</b>
Andre schrieb am 25.10.2010:
So zu meinen ersten problem. Mit IE wird der editor angezeigt. Das heißt TinyMCE ist nicht Firefox3 kompitable, deswegen wäre eine alternative gut oder evtl ein bugfix. Des Weiteren zu meinen 2ten problem mit dem Speichern habe ich nun auch gefixt. Und zu der Warnung die hab ich auch rausbekommen. Die kommt nämlich wenn in der datei keine daten sind, dies lässt sich via if schleife aber leicht rausmachen.
Stefan Wienströer schrieb am 25.10.2010:
ok, falls du sonst noch Probleme hast, aknnst du dich natürlich gerne nochmal melden.
Stefan Wienströer schrieb am 26.10.2010:
Es scheint so als hat sich beim TinyMCE die API geändert. Bitte das ganze hier herunterladen: http://blog.stevieswebsite.de/download/WYSIWYG.zip
Freddy schrieb am 18.11.2010:
Gibt es schon eine Lösung bzgl. der "rn" in jedem Zeilenumbruch ? Lieben Gruß und Danke für dieses Projekt :)
Stefan Wienströer schrieb am 18.11.2010:
ja, schau dir mal stripslashes an.
Freddy schrieb am 19.11.2010:
Also bzgl. stripslashes und/oder str_replace bräuchte ich einen kleinen Gedankenanstoß. Bekomms einfach nicht hin. :( Gerne auch per E-Mail falls sich jmd bereit erklärt. Lieben Gruß
Smithy schrieb am 30.06.2011:
Hi, funktioniert die neue Version 3.4 mit diesem CMS? Hat da jemand Erfahrung?
Toni schrieb am 13.10.2011:
Huhu, bis zu diesem Punkt lief alles super. Allerdings lässt sich der WYSIWYG Editor nicht einbinden.. Ich habe den Code oben so übenommen, wie er dort steht.. Aber es geht nichts... Kann mir jemand sagen, was los ist? :O Schöne Grüße
Stefan Wienströer schrieb am 13.10.2011:
Was bedeutet denn "Es geht nichts..." genau?^^
Kai schrieb am 20.10.2011:
Hallo, es fehlen einige Dateien! Ich habe die aktuelle Version eingebaut. Allederings müssen auch die Ordner css, lists, media und templates mit in den Ordner WYSIWYG. Und noch ein großes Lob! Das Tutorial ist echt super!
Stefan Wienströer schrieb am 20.10.2011:
Hallo Kai, wenn dort Dateien fehlen, kannst du die einfach aus der aktuellen Version ziehen, die dürften noch gleich sein: https://www.contentlion.de Gruß Stefan
Kai schrieb am 20.10.2011:
Hallo, ich wollte es nur mal für die anderen sagen, die dieses Tutorial auch lesen. Ich habe es etwas anders gemacht als hier beschrieben, ich habe mir den Editor von der Webseite besorgt und den Code dann selbst angepasst. Aber super Tutorial!
Andreas schrieb am 23.10.2011:
Du hast ein sehr gutes Tutorial erstellt! Nur hier stimmt irgendwie der Quellcode nicht (doppelte Passagen). Gruß Andreas
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project