Verfasst von: bletra | 5. November 2009

Aufgepeppte textarea für Adminaufgaben in Websystemen

Die aufgepeppte Textarea, die wir erstellen möchten:

Screenshot Editor mit JavaScript

Wer Content Management Systeme kennt, kennt verschiedene Varianten von Rich Text Editor. Häufig ist dies ein textarea-Element mit Knöpfen und viel JavaScript. Hier möchte ich den von Yahoo vorstellen. In der YUI Library gibt es verschiedene widgets, unter anderem einen Editor. Yahoo stellt eine Anleitung mit Video und die zugehörige API Dokumentation zur Verfügung.

Anleitung zum Einbinden des Editors in eine eigene Seite

  1. HTML-Code: Formular mit textarea
  2. Formatierung CSS einbinden und div-Element, das das Formular mit dem Editor umschließt mit class=“yui-skin-sam“ versehen.
  3. Scripte einbinden.
  4. Toolbar anpassen und Editor rendern.

zu 1:

zu 1:

<form method="post" action="#" id="form1">
	<div>
		<textarea id="editor" name="editor" rows="20" cols="75"></textarea>
		<input name="submit" id="submit" type="submit" value="submit" />
	</div>
</form>

zu 2:

<link rel="stylesheet" type="text/css"
	href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/skin.css" />

<div class="yui-skin-sam">

zu 3:

zu 3:

<!-- Utility Dependencies -->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

zu 4:

(function() {
    var myEditor = new YAHOO.widget.Editor("editor", {
    height: "200px",
    width: "700px",
    dompath: false,
    handleSubmit: true,
    animate: true,
    toolbar: {
        titlebar: "Mein Editor",
        buttons: [
            { group: "textstyle", label: "Format",
                buttons: [
                    { type: "push", label: "Fett", value: "bold" },
                    { type: "push", label: "Kursiv", value: "italic" },
                    { type: "push", label: "Unterstrichen", value: "underline" },
                    { type: "separator" },
                    { type: "select", label: "Arial", value: "fontname", disabled: true,
                        menu: [
                            { text: "Arial", checked: true },
                            { text: "Arial Black" },
                            { text: "Comic Sans MS" },
                            { text: "Courier New" },
                            { text: "Lucida Console" },
                            { text: "Tahoma" },
                            { text: "Times New Roman" },
                            { text: "Trebuchet MS" },
                            { text: "Verdana" }
                        ]
                    },

                    { type: "spin", label: "13", value: "Schriftgröße", range: [ 9, 75 ], disabled: true },
					{ type: "separator" },
					{ type : "push", label : "Aufzählungszeichen", value : "insertunorderedlist"},
					{ type : "push", label : "Nummerierung", value : "insertorderedlist"},
					{ type: "separator" },
                    { type: "color", label: "Schriftfarbe", value: "forecolor", disabled: true },
                    { type: "color", label: "Hintergrundfarbe", value: "backcolor", disabled: true },
                    { type: "separator" },

                    { type : "push", label : "Linksbündig CTRL + SHIFT + [", value : "justifyleft"},
					{ type : "push", label : "Zentriert CTRL + SHIFT + |", value : "justifycenter"},
					{ type : "push", label : "Rechtsbündig CTRL + SHIFT + ]", value : "justifyright"},
					{ type : "push", label : "Blocksatz", value : "justifyfull"},
					{ type: "separator" },
					{ type : "select", label : "Formatvorlage", value : "heading",	disabled : true,
						menu : [
							{text : "Normal", value : "none", checked : true},
							{text : "Überschrift 1", value : "h1"},
							{text : "Überschrift 2",	value : "h2"},
							{text : "Überschrift 3",	value : "h3"}
                		]
            		}
				]
			},
			{ group: "actions", label: "Aktionen",
                buttons: [
					{ type : "push", label : "externer HTML Link CTRL + SHIFT + L", value : "createlink", disabled : true},
					{ type: "separator" },
					{ type : "push", label : "Rückgängig", value : "undo", disabled : true},
                    { type : "push",  label : "Wiederholen", value : "redo", disabled : true}
				]
			}
		]
	}
});
myEditor.render();

})();
Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: