Show and edit source code of div on button clicked like WYSIWYG editor

To make toggle between creation mode and code mode you need to create div tag with contenteditable attribute and textarea tag and button to toggle Between them.
we will be use javascript code bellow to do this,
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> #btncommends{padding:3px; background:#efefef} #texteditor, #srccode{width:100%; height:200px; border:0; box-shadow: 0 0 2px 0; padding:2px; margin-top:5px} </style> <div id="btncommends"> <button id="btnsrc" onclick="srccode()" class="material-icons">edit</button> </div> <div id="bodyeditor" > <div id="texteditor" contenteditable="true" ></div> <textarea id="srccode" style="display:none" ></textarea> </div> <script> function srccode() { var btnsrc =document.getElementById("btnsrc"); var texteditor =document.getElementById("texteditor"); var srccode =document.getElementById("srccode"); btnsrc.setAttribute("onclick", "texteditor()"); btnsrc.innerHTML="code"; texteditor.setAttribute("style", "display:none"); srccode.setAttribute("style", "display:block"); } function texteditor() { var texteditor =document.getElementById("texteditor"); var srccode =document.getElementById("srccode"); btnsrc.setAttribute("onclick", "srccode()"); btnsrc.innerHTML="edit"; texteditor.setAttribute("style", "display:block"); srccode.setAttribute("style", "display:none"); } document.getElementById("srccode").addEventListener('change', (event) => { document.getElementById("texteditor").innerHTML=document.getElementById("srccode").value; }, false); document.getElementById("texteditor").addEventListener("input", inputEvt => { document.getElementById("srccode").value=document.getElementById("texteditor").innerHTML; }, false); </script>

© Manajmnt code

Share to :

☷✎