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.

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>
    </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.