Wysiwyg-Editor: Erstes Beispiel mit Listing

Kleines Tutorial: Wysiwyg-Editor / Erstes Listing

Übersicht / Seite:

Wysiwyg-Editor (Ein kleines Tutorial, Einleitung)
Erster Beispiel (mit einem Listing für einen kleinen Wysiwyg-Editor)
Auswahllisten (für Schriftfamilie, Schriftgröße, Schriftfarbe und H...)
Einfügen von Hyperlinks (und Einfügen von Listen)
Einfügen von Fotos (und sonstigen Grafiken)
Inhalt verarbeiten (Quelltext ausgeben oder senden und speichern)
Fertiger Editor (Ansicht, Funktionen und Hinweise zum Download)
HTML speichern (Beispiel-Listing zum Speichern von Hypertext)
Farbpalette (nur als Demo oder zum Einbinden in Webseiten)

Erstes Listing, Formatierung des Textes

Auf der ersten Seite dieses kleinen Tutorials stellten wir eine Möglichkeit vor, wie Sie eine Textarea gegen einen iFrame austauschen können und wie der Inhalt dieses iFrames im Browser editierbar wird. Allein die Editierbarkeit reicht jedoch noch nicht aus, um ein normales Formular in einen Wysiwyg-Editor zu verwandeln. Auch die Eingaben in eine Textarea sind editierbar, der Umweg über einen iFrame wäre unnötig, wenn dem Nutzer nicht mehr Komfort bei der Textverarbeitung geboten würde. Was noch fehlt ist ein kleines Menü, welches die wichtigsten Befehle zur Formatierung der Eingaben und des Textes enthält. Für diese Aufgabe bieten sich Methoden wie ExecCommand und pasteHTML an.

Im ersten kleinen Listing wurde der Wysiwyg mit einigen Möglichkeiten zur Bearbeitung des Textes versehen, um einzelne Wörter oder Textpassagen fett, kursiv oder unterstrichen darzustellen. Weiterhin ist es möglich, den Text linksbündig, rechtsbündig, zentriert oder als Blocksatz auszurichten. Auf die Verwendung von grafischen Buttons wurde in diesem und in allen weiteren Beispielen verzichtet, um die Listung so einfach wie möglich zu halten.

Ein kleiner Wysiwyg-Editor
Ein erster kleiner Wysiwyg-Editor

Im Beispiel werden im Head-Bereich des Quelltextes die zur Formatierung des Textes benötigten JavaScript-Funktionen gelistet. Im Body-Bereich wird ein Input-Formularelement erzeugt, dessen Typ durch das Attribut Button bestimmt wird. Obwohl es sich bei Input eigentlich um ein Formularelement handelt, so ist der Einsatz dieses Formularelementes nicht auf die Verwendung innerhalb eines Formulars beschränkt, sondern darf in Block- und Inline-Elementen verwendet werden. Bei Betätigung des Buttons wird durch den JavaScript Eventhandler onClick die zugehörige Funktion aufgerufen und der markierte Textabschnitt formatiert.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Erster kleiner Wysiwyg-Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
body {background-color: #F1EDDA}
.forme {width: 544px; text-align: center;
margin-top: 30px; margin-left: auto; margin-right: auto}

.fette {font-weight: bold}
.under {text-decoration: underline}
.schrg {font-style: italic}

a:link    {text-decoration: none; color: #6F3B2B}
a:visited {text-decoration: none; color: #6F3B2B}
a:hover   {text-decoration: none; color: #004080}
a:active {text-decoration: none; color: #004080}
</style>

<script type="text/javascript">

var derFrame, meinWert;

function schalteEIN(){

derFrame = document.getElementById("meinEditor").contentWindow.document;
meinWert = derFrame;

derFrame.designMode = "On";
}

function Schriftfett(){meinWert.execCommand("bold",       false, null);
}
function Schriftuntr(){meinWert.execCommand("underline", false, null);
}
function Schriftschr(){meinWert.execCommand("italic",     false, null);
}
function ABSleft() {meinWert.execCommand('justifyleft', false, null);
}
function ABSright() {meinWert.execCommand('justifyright', false, null);
}
function ABScenter(){meinWert.execCommand('justifycenter',false, null);
}
function ABSblock() {meinWert.execCommand('justifyfull', false, null);
}
</script>
</head>

<body onload="schalteEIN()">
<div class="forme">

<input type="button" onclick="Schriftfett()" value=" b "
class="fette">
<input type="button" onclick="Schriftuntr()" value=" u "
class="under">
<input type="button" onclick="Schriftschr()" value=" i "
class="schrg">
<input type="button" onclick="ABSleft()"     value=" left " >
<input type="button" onclick="ABSright()"    value=" right " >
<input type="button" onclick="ABScenter()"   value=" center ">
<input type="button" onclick="ABScenter()"   value=" block " >

<br>

<iframe id="meinEditor" src="datei.html" width="520" height="220">
</iframe>

<br>

<a href="javascript:alert(derFrame.body.innerHTML)">» Quelltext «</a>

</div>
</body>
</html>

Um den vom Editor erzeugten Quelltext begutachten zu können, kann der Quelltext über einen Link mit Hilfe der JavaScript Methode alert() in einem Dialogfenster ausgegeben werden. Bei dem obersten Bild handelt es sich um ein Dialogfenster, welches im Firefox 9.0 geöffnet wurde, beim unteren Bild um ein Dialogfenster vom Internet Explorer 9.0. Gut erkennbar an der Ausgabe in den Dialogfenstern wird, dass der Quelltext in Abhängigkeit vom verwendeten Browser Unterschiede aufweist. So fügt der Firefox durchweg CSS-Formatierungen ein, wie "font-weight: bold" bei fetter oder "font-style: italic" bei kursiver Schrift. Der Internet Explorer verwendet hingegen HTML-Tags zur Formatierung, wie <strong> für fette oder <em> für kursive Zeichen.

Ansicht des Quelltextes im FF
Dialogfenster mit Ausgabe des Quelltextes im Firefox 9.0

Ansicht des Quelltextes im IE
Dialogfenster mit Ausgabe des Quelltextes im Internet Explorer 9.0

In diesem ersten Listing wurden nur einige wenige der gebräuchlichsten Kommandos verwendet, um das Beispiel überschaubar zu halten. Auf der Seite Midas Specification findet der interessierte Entwickler eine Übersicht mit weiteren Kommandos. Die einzelnen Kommandos wurden in der Übersicht in alphabetischer Reihenfolge gelistet und mit ergänzenden Hinweisen versehen. Diese ergänzenden Hinweise müssen bei der Verwendung berücksichtigt werden. Des Weiteren finden Sie auf den nachfolgenden Seiten noch Listings zum Einfügen von Hyperlinks und Grafiken, zur Speicherung des editierten Textes und zur Verwendung von Auswahllisten. Hierzu auf der nächsten Seite mehr.

weiterlesen » Verwendung von Auswahllisten

Navigation

Finden und
gefunden werden ...

Planung von Websites
und Webprojekten

- Optimierung -

Einstieg Optimierung

Erfolg oder Misserfolg

Webcoding

Übersicht

Einführung ins Thema

Web Services

Web Services

Tutorials &
diverse Listings

Navigationshilfe

und vieles mehr...