Editor Tutorial HTML Einbindung Einbau TinyMCE
WYSIWYG Editor TinyMCETutorials » Html/Css Tutorials » WYSIWYG Editor TinyMCE
Verfasst von und3r74k3r am 31.05.2009 - wurde schon 10467 mal gelesen
WYSIWYG Editor TinyMCE - Tutorial
Hallo,ich zeige euch einen WYSIWYG Editor. Ein WYSIWYG Editor ist eine Textarea in html.
Bedeutung: What You See Is What You Get.
Das heit, man gibt etwas in die Textarea so ein, wie es auch auf der Seite zu sehen sein soll. Ein WYSIWYG ersetzt die bbcodes und hat auch andere ntzliche funktionen.
Ein kostenloser WYSIWYG Editor ist TinyMCE den knnt ihr hier runterladen.
Das ganze ist auf Englisch, aber es gibt auch ein Deutsches Sprachpaket.
Hier ein Bild von dem fertigen WYSIWYG Editor auf einer Homepage.
Wenn ihr das .zip Archiv heruntergeladen habt, enpackt das in einem Ordner.
Zur Konfiguration:
Ihr erstellt eine neue javascript datei und ffnet diese z.B mit dem Editor.
Die knnt ihr nennen wie ihr die wollt, ich nenne die aber immer tiny_config.js.
Dort schreiben wir die ganzen Einstellungen rein.
tinyMCE.init({ mode : "exact", elements: "text", theme : "advanced", plugins : "safari,spellchecker,pagebreak,style", theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numit", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute", 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 : "js/template_list.js", external_link_list_url : "js/link_list.js", external_image_list_url : "js/image_list.js", media_external_list_url : "js/media_list.js", });
So hier nun die Erklrungen dazu.
mode : "exact", elements: "text",
mode: bedeutet welche textareas mit dem WYSIWYG Editor ersetzt werden sollen.
exact bedeutet das nur texareas mit einem bestimmten Namen ersetzt werden sollen, die namen schreiben wir dann in elements z.B wie hier nur Texareas mit der id="text" werden ersetzt.
Wenn man alle Textareas ersetzten mchte schreibt man mode: "textareas",
theme : "advanced",
Da knnen wir uns ein theme aussuchen, "advanced" ist das standard theme und sieht auch gut aus.
Bei plugins, stehen alle plugins die man benutzen mchte.
theme_advanced_buttons1 :
Die anderen Einstellungen knnt ihr so wie hier bernehmen.
Wenn das alles erledigt ist, ist grte teil geschafft.
Jetzt knnt ihr die Datei schlieen und die datei, wo die textarea mit tiny-mce ersetzt werden soll ffnen.
Ihr mst jetzt nur den code in den textareas anpassen.
<textarea name="text" id="text" rows="20" cols="50"></textarea>
rows und cols mst ihr nicht angeben.
So das war jetzt mal das Grundprinzip, wie man tiny-mce anwendet. Es gibt noch zustzlich Plugins. Jeder kann sich das so anpassen wie er das mchte.
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...