JavaScript: Eigenen HTML Editor mit div contentEditable erstellen (Teil 1 - Grundstruktur) - ITSLOT.DE

Da weder der HTML Editor von Blogger.com noch weitere HTML Editor Versionen meinen Anforderungen entsprechen, versuche ich, eigenen HTML WYSIWYG Texteditor mit JavaScript zu erstellen. Hier werde ich einzelne Schritte beim Aufbauen vom Editor beschrieben. (Wenn man über WYSIWYG spricht, spricht man oft auch über Richtext-Editor)

Zu beachten: Ich bin noch ein JavaScript Anfänger und mein Code könnte Fehler enthalten bzw. nicht optimal sein. Außerdem habe ich kein Ziel, einen cross-browser-fähigen HTML Editor zu erstellen. Mein Editor wird hauptsächlich für Google Chrome optimiert.

Das Ziel ist: Einen “leichten“ Editor erstellen, welcher einfach für eigene Bedürfnisse angepasst werden kann. Der Editor soll 2 Modi haben: WYSIWYG-Ansicht und
HTML-Ansicht

Über “div contentEditable”

Wenn das Attribut contentEditable für z.B. ein DIV Element aktiviert wird, können Benutzer die Inhalte von diesem DIV im Browser ändern (ähnlich wie in Textarea).
Wie es funktioniert, können Sie auf developer.mozilla.org nachlesen. Da gibt es außerdem einige Beispiele.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
    #richEditor { width: 400px; height: 100px; border: 2px solid #888; }
    #htmlEditor { width: 400px; height: 100px; border: 2px solid #888; }
</style>

<script>
    function makeBold() {
    document.execCommand ('bold', false, null);
    }

    function getHTMLcode() {
    var richText = document.getElementById('richEditor').innerHTML;
    var htmlCode = richText.replace(/</g,"<").replace(/>/g,">");
    document.getElementById('htmlEditor').innerHTML = htmlCode;
    }

    function getRichText() {
    var htmlCode = document.getElementById('htmlEditor').innerHTML;
       var richText = htmlCode.replace(/</g,'<').replace(/>/g,'>');
    document.getElementById("richEditor").innerHTML = richText;
    }
</script>

</head>
<body>

<button type="button" onclick="makeBold()">bold</button><br /><br />

<div id="richEditor" contentEditable="true">
Bitte hier ein paar Worte markieren und auf Button klicken.
</div>

<br />

<button type="button" onclick="getHTMLcode()">Get HTML</button>

<br /><br />

<div id="htmlEditor" contentEditable="true"></div>

<br />

<button type="button" onclick="getRichText()">Get RichText</button>

</body>
</html>

Ergebnis:

Erklärung:

In der Grundstruktur befinden sich nur 3 Funktionen:

1) makeBold - markierten Text fett machen.

In dieser Funktion wird der markierte Text mit „document.execCommand“ fett gemacht.

Mit “document.execCommand” kann man HTML-Inhalte manipulieren (z.B. Text fett machen, Text in H1-Tag einschließen, etc.).
Syntax kurz erklärt: document.execCommand (Befehl, standardUIanzeigen, valueArgument);
Beispiel: document.execCommand ('bold', false, null);

Mehr Infos dazu auf developer.mozilla.org

2) getHTMLcode - HTML Code vom formatierten Text anzeigen, damit der formatierte Text z.B. in Blogger.com im HTML Modus eingefügt werden kann.

In dieser Funktion werden Inhalte von der WYSIWYG-Ansicht mit „document.getElementById“ genommen, in HTML-Code mit „richText.replace…“ konvertiert und in die HTML-Ansicht übertragen.
WYSIWYG bedeutet hier “What You See Is What You Ge”

3) getRichText – HTML Code in WYSIWYG-Text zurück umwandeln, damit HTML-Anpassungen in der WYSIWYG-Ansicht wirksam sind.

Diese Funktion ist gleich wie die Funktion „getHTMLcode“ aufgabaut, arbeitet aber in der umgekehrten Richtung.

Dieser Code ist sehr primitiv und sollte noch optimiert werden. Die Funktion “makeBold” wird z.B. mit einem Button aufgerufen. Jedes Button nach Style gestalten ist eine aufwändige Sache. Im Teil 2 ersetze ich das makeBold-Button durch einen Link mit „iconic font Design“ und erweitere die Funktionalität vom Editor.

JavaScript: Eigenen HTML Editor mit div contentEditable erstellen (Teil 1 - Grundstruktur)

Über “div contentEditable”

Erklärung:

Kommentar veröffentlichen