|
SEO Welten
Buchempfehlungen
|
|
Wysiwyg-Editor: Vorschau des Quelltextes in einer Textarea
Kleines Tutorial: Wysiwyg-Editor / Inhalt verarbeiten
Ü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)
Fünftes Listing, Inhalte verarbeiten, senden und speichern
Ein Editor nutzt nicht viel, wenn sich die bearbeiteten Inhalte sich nicht
abspeichern lassen. Da die Abspeicherung bei einem Online-Editor nur serverseitig erfolgen kann, JavaScript
hingegen eine clientseitige Scriptsprache ist, muss zur Speicherung eine serverseitige Scriptsprache verwendet
werden. Es braucht nicht unbedingt PHP verwendet werden, andere serverseitige Script- und Programmiersprachen
erfüllen ebenfalls ihren Zweck, doch da PHP zu den verbreitetsten serverseitigen Programmiersprachen gehört,
wurde PHP auch für das nachfolgende Beispiel verwendet.
Nun ist ein Wysiwyg recht praktisch für die Gestaltung von Webdokumenten, besser ist hingegen ein Editor,
der zumindest zusätzlich noch eine Ansicht des Quelltextes erlaubt. Diese zusätzliche Funktion zur Ansicht
des Quelltextes wurde im Listing auf dieser Seite berücksichtigt.
Vorschau des Quelltextes in einer Textarea
Bei der Überprüfung des Quelltextes werden gut die Unterschiede zwischen
den Browsern ersichtlich. Die letzten Tests wurden mit dem Firefox 11.0 und dem Internet Explorer 9.0 durchgeführt,
wobei der FF die Eingaben mehr mit Hilfe von Stylesheets verarbeitet, der IE hingegen mehr mit Hilfe von
HTML- Elementen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zweiter 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);
}
/* Vorschau in Textarea */
function vorSCHAU() {
var imFrame = derFrame.body.innerHTML;
document.getElementsByTagName('textarea')[0].value
= imFrame;
}
</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">
<br>
<iframe id="meinEditor" src="datei.html" width="520" height="220">
</iframe>
</div><div class="forme">
<textarea name="beliebig" cols="62" rows="10"></textarea><br>
<a href="javascript:vorSCHAU()">» Quelltext «</a>
</div>
</body>
</html>
Um den Inhalt des iFrames zu speichern oder in einer ergänzenden Anwendung
weiter zu verarbeiten, kann der Inhalt per Post versendet werden. Nachfolgen ein Beispiel, bei dem lediglich
das Listing auf dieser Seite noch um ein kleines Formular unterhalb der ersten Textarea ergänzt wurde. Voraussetzung
ist in diesem Beispiel jedoch, dass der kleine Wysiwyg-Editor als PHP-Datei (editor.php) abgespeichert wird
und PHP zur Verfügung steht. Eine Weiterverarbeitung mit JavaScript oder Ajax dürfte in vielen Fällen anstrebenswerter
sein, nur für die Speicherung ist eine serverseitige Scriptsprache erforderlich, doch als Beispiel sollte
es genügen.
<form action="editor.php" method="post"
onsubmit="escape(this.elements.quelle.value=derFrame.body.innerHTML)">
<input type="hidden" name="quelle" value="">
<textarea name="sprudel" cols="62" rows="10">
<?php
if (isset($_POST["quelle"])
and !empty($_POST["quelle"])){
echo $_POST["quelle"];
}
?></textarea><br>
<input type="submit" value="» Sende Quelltext «">
</form>
Für den Versand allein ist hingegen PHP nicht erforderlich, da ein minimales
Formular zum Versenden ausreicht. Der Event-Handler onSubmit ruft beim Absenden des Formulars den Wert des
Input-Elementes mit dem Namen "quelle" ab, wobei diesem Element der Inhalt von derFrame.body.innerHTML
als Wert zugewiesen wird.
<form action="editor.php" method="post"
onsubmit="escape(this.elements.quelle.value=derFrame.body.innerHTML)">
<input type="hidden" name="quelle" value="">
<input type="submit" value="» Sende Quelltext «">
</form>
Wichtiger Hinweis:
Das Beispiel auf dieser Seite ist nur als Demo gedacht. Die Versendung, der Empfang, die Weiterverarbeitung
oder die Speicherung sollten bei einem frei zugänglichen Formular niemals unkontrolliert erfolgen, um einer
Einschleusung von Schadcode vorzubeugen!
Hierzu auf den nächsten Seiten mehr.
weiterlesen » Ein fertiger Editor |
Beispiel Speicherung
|
|
Navigation
Finden und
gefunden werden ...
- Optimierung -
Webcoding
Übersicht
Web Services
Tutorials &
diverse Listings
und vieles mehr...
|
