JavaScript: Eigenen HTML Editor erstellen (Teil2)

Anzeige

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:


Eigenen HTML Editor mit Java erstellen


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,"&amp;" + "lt;").replace(/>/g,"&amp;" + "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,"&lt;").replace(/>/g,"&gt;");
     document.getElementById('richEditor').innerHTML = htmlCode;
     }
    
     function getRichText() {
     var htmlCode = document.getElementById('richEditor').innerHTML;
        var richText = htmlCode.replace(/&lt;/g,'<').replace(/&gt;/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>


<!-- "Add Link" Popup Window -->
<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>
<!-- "Add Link" Popup Window -->

<!-- "Add Code" Popup Window -->
<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>
<!-- "Add Code" Popup Window -->

<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.

Kommentar veröffentlichen