WYSIWYG Editor TinyMCE

Verfasst von und3r74k3r am 31.05.2009 - wurde schon 10521 mal gelesen

Kategorie: Html/Css

Bewertung:

6x bewertet

Schwierigkeit: mittel
Kommentare: [ 3 ]

Tag - Schlagwort Editor Tutorial HTML Einbindung Einbau TinyMCE

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 :

Dort schreiben wir die Reihenfolge der plugins hin die wir benutzen wollen, dabei knnen wir die einzelnen Zeilen ansprechen z.B theme_advanced_buttons1 fr die erste Zeile theme_advanced_buttons2 fr die Zweite Zeile usw.

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