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>

☷✎

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

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

How-to create html editor with context buttons

JSON LD code generator - json ld product

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

Related

Comments

Post a Comment