Toggle between creation mode and editor mode like [ blogger editor ] using codemirror & JavaScript

In this code Iwill be share with you how to Toggle between creation mode and editor mode like [ blogger editor ] using codemirror & JavaScript
<link rel='stylesheet' href='https://codemirror.net/lib/codemirror.css'/> <script src='https://codemirror.net/lib/codemirror.js'></script> <script src='https://codemirror.net/mode/xml/xml.js'></script> <script src='https://codemirror.net/mode/javascript/javascript.js'></script> <script src='https://codemirror.net/mode/css/css.js'></script> <script src='https://codemirror.net/mode/htmlmixed/htmlmixed.js'></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> #btncommends{padding:3px; background:#efefef} #texteditor, .CodeMirror{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> <div id="srccode" ></div> </div> <script> editor = CodeMirror(document.getElementById("srccode"), { mode: "text/html", lineNumbers: true, value:"" }); document.getElementById("texteditor").addEventListener("input", (event) => { editor.setValue(document.getElementById("texteditor").innerHTML) }); document.getElementById("srccode").addEventListener('input', (event) => { document.getElementById("texteditor").innerHTML=editor.getValue(); }); document.getElementById("srccode").addEventListener('paste', (event) => { document.getElementById("texteditor").innerHTML=editor.getValue(); }); 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"); } </script>

© Manajmnt code

Share to :

☷✎