JavaScript: Eigenen HTML Editor erstellen (Teil2)

Im Teil 1 dieser Artikelserie habe ich die Grundstruktur meines HTML Editors erstellt. Der Editor konnte nur einen markierten Text fett machen und den HTML Code zeigen.

Im Teil 2 wurden die Funktionen erweitert:

Code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
     #richEditor { width: 470px; height: 300px; overflow-y: scroll !important; border: 1px solid #888; padding: 10px;}
     a.button {border: 1px solid transparent; border-radius: 4px; border-color: #ccc; padding: 6px 12px; margin: 2px;color: #333; background-color: #fff; font-size: 14px; text-align: center;}
     [contenteditable=true]:empty:before {content: attr(placeholder); display: block; color: #888; /* For Firefox */ }

     .black_background {display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; opacity: .70; -moz-opacity: 0.7; filter: alpha(opacity=70);}
     .white_windows { display: none; position: absolute; top: 17%; left: 17%; width: 35%; height: 50%; padding: 16px; border: 2px solid #CEE3F6; background-color: white; z-index: 1002; overflow: auto;}

     textarea { width: 400px; height: 100px; border: 2px solid #888;}
</style>
</style>

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

     function makeItalic() {
     document.execCommand ('italic', false, null);
     }

     function makeUnderline() {
     document.execCommand ('underline', false, null);
     }

     function makeStrikeThrough() {
     document.execCommand ('strikeThrough', false, null);
     }

     function delURL() {
         document.execCommand ('unlink', false, null);
     }

     function addImage() {
     var imageUrl = prompt ("Bitte Bild-URL eingeben", "");
     if (imageUrl != null) {
     document.execCommand("insertImage", false, imageUrl);
     }
     }

     /* **** Create Link Start ***** */
     function openAddUrlDialog() {
         var selected = document.getSelection();
         var selectedText = selected.toString();
         document.execCommand("insertHTML",false,"<a id='tmplink193' href='#'>"+selectedText+"</a>");
        /* Open Dialogwindow*/
         document.getElementById('white').style.display='block';document.getElementById('black').style.display='block';
         document.getElementById("linktext").value = selectedText;
     }
     function addURL() {
         var url1 = document.getElementById("linkurl").value;
         document.getElementById('tmplink193').href = url1;
         var linktext1 = document.getElementById("linktext").value;
         document.getElementById('tmplink193').innerHTML = linktext1;
         /* Close Dialogwindow*/
         document.getElementById('white').style.display='none';
         document.getElementById('black').style.display='none';
         document.getElementById("tmplink193").removeAttribute("id");
     }
     function addURLcancel() {
         /* Close Dialogwindow */
         document.getElementById('white').style.display='none';
         document.getElementById('black').style.display='none';
         document.getElementById('tmplink193').remove();
     }
     /* *****    Create Link End ***** */



    /* **** Insert Code Start **** */
     function openInsertCodeDialog() {
         document.execCommand("insertHTML",false,"<pre id='tmppre393'></pre>");
         /* Open Dialogwindow*/
         document.getElementById('white2').style.display='block';document.getElementById('black').style.display='block';
         }
     function addCode() {
         var code1 = document.getElementById("enteredcode").value;
         var convertedcode = code1.replace(/</g,"&" + "lt;").replace(/>/g,"&" + "gt;");
         document.getElementById('tmppre393').innerHTML = convertedcode;
         document.getElementById('tmppre393').removeAttribute("id");
         /* Close Dialogwindow */
         document.getElementById('white2').style.display='none';
         document.getElementById('black').style.display='none';
     }
     function addCodeCancel() {
         /* Close Dialogwindow*/
         document.getElementById('white2').style.display='none';
         document.getElementById('black').style.display='none';
         document.getElementById('tmppre393').remove();
     }
    /* Insert Code End*/



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

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

     function preventDIVbyEnter (event) {
         if (event.which == 13 || event.keyCode == 13) {
             document.execCommand('insertHTML', false, '<br><br>');
             return false;
         }
     return true;
     }


</script>

</head>
<body>
<br />
<a class="button" href="#" onclick="makeBold()" title="bold" rel="nofollow"><i class="fa fa-bold" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="makeItalic()" title="italic" rel="nofollow"><i class="fa fa-italic" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="makeUnderline()" title="underline" rel="nofollow"><i class="fa fa-underline" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="makeStrikeThrough()" title="StrikeThrough" rel="nofollow"><i class="fa fa-strikethrough" aria-hidden="true"></i></a>

<a class="button" href="#" onclick="openAddUrlDialog()" title="Link hinzufügen" rel="nofollow"><i class="fa fa-link" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="delURL()" title="Link löschen" rel="nofollow"><i class="fa fa-chain-broken" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="addImage()" title="Bild hinzufügen" rel="nofollow"><i class="fa fa-picture-o" aria-hidden="true"></i></a>
<a class="button" href="#" onclick="openInsertCodeDialog()" title="Code hinzufügen" rel="nofollow"><i class="fa fa-code" aria-hidden="true"></i></a>


<div id="white" class="white_windows">URL: <input type="text" id="linkurl" value=""><br /><br />Linktext: <input type="text" id="linktext" value=""><br /><br />
<button onclick="addURL()">OK</button><br /><br />
<button onclick="addURLcancel()">Abrechnen</button><br /><br />
</div>
<div id="black" class="black_background"></div>



<div id="white2" class="white_windows">
<textarea id="enteredcode"></textarea>
<br /><br />
<button onclick="addCode()">Code einfügen</button><br /><br />
<button onclick="addCodeCancel()">Abrechnen</button><br /><br />
</div>
<div id="black" class="black_background"></div>


<br /><br />

<div id="richEditor" contentEditable="true" placeholder="Hier klicken und Text eingeben..." onkeypress="return preventDIVbyEnter(event)" type="text"></div>

<br />

<button type="button" onclick="getHTMLcode()">HTML Code bekommen</button>
<button type="button" onclick="getRichText()">RichText Ansicht</button>
<br /><br />

</body>
</html>

Aus Zeitgründen werde ich die Realisierung von den Funktionen nicht beschreiben. Es könnte sein, dass der Editor nicht mit allen Webbrowser kompatibel ist. Ich habe es nur mit Chrome getestet. Es könnte auch sein, dass nicht alle Funktionen 100% korrekt realisiert sind.

JavaScript: Eigenen HTML Editor erstellen (Teil2)

Kommentar veröffentlichen