Loading...   Upload Image

WYSIWYG Editor TinyMCETutorials » Html/Css Tutorials » WYSIWYG Editor TinyMCE

Verfasst von und3r74k3r am 31.05.2009 - wurde schon 8004 mal gelesen

Kategorie: Html/Css
Bewertung:
6x bewertet
Schwierigkeit: mittel
Kommentare: [ 3 ]

Tag - Schlagwort Editor Tag - Schlagwort Tutorial Tag - Schlagwort HTML Tag - Schlagwort Einbindung Tag - Schlagwort Einbau Tag - Schlagwort 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 heißt, 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 nützliche funktionen.
Ein kostenloser WYSIWYG Editor ist TinyMCE den könnt 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.
TinyMCE

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 könnt 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 Erklärungen 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 möchte schreibt man mode: "textareas",
theme : "advanced",

Da können wir uns ein theme aussuchen, "advanced" ist das standard theme und sieht auch gut aus.

Bei plugins, stehen alle plugins die man benutzen möchte.
theme_advanced_buttons1 :
Dort schreiben wir die Reihenfolge der plugins hin die wir benutzen wollen, dabei können wir die einzelnen Zeilen ansprechen z.B theme_advanced_buttons1 für die erste Zeile theme_advanced_buttons2 für die Zweite Zeile usw.

Die anderen Einstellungen könnt ihr so wie hier übernehmen.

Wenn das alles erledigt ist, ist größte teil geschafft.
Jetzt könnt ihr die Datei schließen und die datei, wo die textarea mit tiny-mce ersetzt werden soll öffnen.

Ihr müst jetzt nur den code in den textareas anpassen.
<textarea name="text" id="text" rows="20" cols="50"></textarea>

rows und cols müst ihr nicht angeben.

So das war jetzt mal das Grundprinzip, wie man tiny-mce anwendet. Es gibt noch zusätzlich Plugins. Jeder kann sich das so anpassen wie er das möchte.

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


Affiliates:   Pat DG  •   Colorful Gfx  •   The Seduction  •   Design Grafixx  •   Blue-Graphics  •   Gallery Yuri  •   Chibi Graphics  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider