Tweet
Hi
habe mir gerade einen ganz nett aussehenden Rich Text (WYSIWYG) Editor gebaut, nach diesem Vorbild hier: http://www.mozilla.org/editor/midasdemo
Unten habe ich den Code meines Scripts angefügt.
Habe wie dort Buttons drüber gelegt die den Text jetzt schön formatieren können.
Wo ich aber überhaupt nicht durchsteige und auch kein richtiges Konzept finden kann: Wie konvertiere ich die Richtext-Inhalte in HTML-Code?
Denn das ist mein eigentliches Ziel. Ein planloser Benutzer soll sich einen Seiteninhalt zusammenbasteln und das Script soll den Code erstellen und abspeichern.
Doch wie?
[meine ideen]
Hatte erst daran gedacht, bei jedem onClick-Ereignis der Buttons den passenden HTML-Code dazu in eine echte , evtl unsichtbare Textarea zu schreiben (mit getSelection() etc)
Das stellte sich aber als Unfug heraus, denn was ist zB wenn der User von Hand was in das RTF Feld schreibt? Ein Onchange Ereignis oder sowas gibt es da ja nicht.
Zweite Möglichkeit wäre vielleicht eine Funktion die erst aufgerufen wird wenn alles fertig ist, die RTF Box auseinander nimmt und daraus den HTML-Code erstellt. Aber eben wie?
[/meine ideen]
Die Seite oben erstellt ja auch HTML-Code auf Wunsch, sogar entweder mit oder ohne CSS. Aber ich steig nicht durch den Code durch wo das geschieht und wie
Wäre euch echt dankbar wenn ihr mir ein paar Denkanstösse geben könntet wie ich die Inhalte aus meiner RTF Box ins HTML-Format bekomme.
Ich verange jetzt garkein fertiges Script von euch
nur ein paar Ideen oder Konzepte wie man das realisieren kann.
Und bitte nicht die Fertig Editoren als Alternative empfehlen, ich machs mir immer lieber selber auch wenns haperig ist
DAAAANKE ich zähl auf Euch
Die Buttons sind noch etwas unsauber programmiert klar ist ja auch nur ein Test hoffe die Formatierung is sowie t ok vom Code
habe mir gerade einen ganz nett aussehenden Rich Text (WYSIWYG) Editor gebaut, nach diesem Vorbild hier: http://www.mozilla.org/editor/midasdemo
Unten habe ich den Code meines Scripts angefügt.
Habe wie dort Buttons drüber gelegt die den Text jetzt schön formatieren können.
Wo ich aber überhaupt nicht durchsteige und auch kein richtiges Konzept finden kann: Wie konvertiere ich die Richtext-Inhalte in HTML-Code?
Denn das ist mein eigentliches Ziel. Ein planloser Benutzer soll sich einen Seiteninhalt zusammenbasteln und das Script soll den Code erstellen und abspeichern.
Doch wie?
[meine ideen]
Hatte erst daran gedacht, bei jedem onClick-Ereignis der Buttons den passenden HTML-Code dazu in eine echte , evtl unsichtbare Textarea zu schreiben (mit getSelection() etc)
Das stellte sich aber als Unfug heraus, denn was ist zB wenn der User von Hand was in das RTF Feld schreibt? Ein Onchange Ereignis oder sowas gibt es da ja nicht.
Zweite Möglichkeit wäre vielleicht eine Funktion die erst aufgerufen wird wenn alles fertig ist, die RTF Box auseinander nimmt und daraus den HTML-Code erstellt. Aber eben wie?
[/meine ideen]
Die Seite oben erstellt ja auch HTML-Code auf Wunsch, sogar entweder mit oder ohne CSS. Aber ich steig nicht durch den Code durch wo das geschieht und wie
Wäre euch echt dankbar wenn ihr mir ein paar Denkanstösse geben könntet wie ich die Inhalte aus meiner RTF Box ins HTML-Format bekomme.
Ich verange jetzt garkein fertiges Script von euch
nur ein paar Ideen oder Konzepte wie man das realisieren kann.Und bitte nicht die Fertig Editoren als Alternative empfehlen, ich machs mir immer lieber selber auch wenns haperig ist
DAAAANKE ich zähl auf Euch
PHP-Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>WYSIWYG-Test</title>
<script>
function start() {
document.getElementById('edit').contentWindow.document.designMode = "on";
}
</script>
</head>
<body onload="start();">
<table border="0" bgcolor="#C0C0C0"><tr>
<td><select onchange="document.getElementById('edit').contentWindow.document.execCommand('FontName', false, this.value);">..</select></td>
<td><select onchange="document.getElementById('edit').contentWindow.document.execCommand('FontSize', false, this.value);">...</select></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('Bold', false, '');">B</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('Italic', false, '');">I</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('Underline', false, '');">U</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('ForeColor', false, '#880000');">Textfarbe</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('BackColor', false, '#000000');">HG-Farbe</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('InsertImage', false, 'http://url.gif');">Grafik</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('JustifyLeft', false, '');">Links</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('JustifyCenter', false, '');">Zentriert</button></td>
<td><button onclick="document.getElementById('edit').contentWindow.document.execCommand('JustifyRight', false, '');">Rechts</button></td>
</tr></table><br>
<iframe id="edit" width="100%" height="200px"></iframe><br><br>
// textarea für evtl html-code:
<textarea cols="100%" rows="10"></textarea><br><br>
</body>
</html>
ist ja auch nur ein Test hoffe die Formatierung is sowie t ok vom Code
Kommentar