Manajmnt code: code

How-to create html editor with context buttons

https://manajmnt-code.blogspot.com/2021/04/how-to-create-html-editor-with-context.html

In this example i will be share with you how to create html editor with context buttons using codemirror library and JavaScript [ Document.execCommand() ]

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<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 rel='stylesheet' href='https://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='https://codemirror.net/doc/docs.css'>
<style type='text/css'>
.CodeMirror {
    float: left;
    width: 100%;
    border: 1px solid black;}


</style>
</head>
<body>

<div>
    <input type="file" onchange="localLoad(this.files);" />
    <button onclick="undo()">undo</button>
  <button onclick="redo()">redo</button>
  <button onclick="selectAll()">selectAll</button>
  <button onclick="cut()">cut</button>
  <button onclick="copy()">copy</button>
  
</div>
<div id="editor"> </div>
<script>
   var myCodeMirror = CodeMirror(
   document.getElementById('editor'), {
      lineNumbers: true
   });

   function localLoad(files) {
       if (files.length == 1) {
            document.title = escape(files[0].name);
            var reader = new FileReader();
            reader.onload = function(e) {
              myCodeMirror.setValue(e.target.result);
            };
            reader.readAsText(files[0]);
         }
    }
  function undo(){
  myCodeMirror.execCommand("undo", false, null);
  }
  function redo(){
  myCodeMirror.execCommand("redo", false, null);
  }
  function selectAll(){
  myCodeMirror.execCommand("selectAll", false, null);
    
  }
   function copy(){
     myCodeMirror.focus();
   document.execCommand("copy", false, null);
  }
  function cut(){
     myCodeMirror.focus();
   document.execCommand("cut", false, null);
  }

 
</script>

</body>
</html>

code_mirror How-to

Mami Mahfoud April 24, 2021

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

https://manajmnt-code.blogspot.com/2021/04/toggle-between-creation-mode-and-editor.html

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>

code_mirror JavaScript

Mami Mahfoud April 15, 2021

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

https://manajmnt-code.blogspot.com/2021/04/show-and-edit-source-code-of-div-on.html

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>

code_mirror HTML JavaScript

Mami Mahfoud April 14, 2021

How-to select & copy code from codemirror editor with button

https://manajmnt-code.blogspot.com/2021/04/how-to-select-copy-code-from-codemirror.html

I will be share with you how to select code in editor and copy it using javascript Method [ focus() ,execCommand("selectAll"), execCommand("copy") ]

  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/doc/docs.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/css/css.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>
<input type="file" onchange="localLoad(this.files);" />


<div class="editor"> </div>



<script>
   var myCodeMirror = CodeMirror(
   document.getElementsByClassName('editor')[0], {
     mode: "text/html",
	value:"<p>mami</p>"
    
   });
var dd=document.createElement("button");
  dd.innerHTML = "copy"; 
  dd.style="position: absolute; top: 0; right: 0;"
  dd.onclick = function(){
   myCodeMirror.focus();
  myCodeMirror.execCommand("selectAll");   ;
document.execCommand("copy");                                                
};
document.getElementsByClassName("editor")[0].appendChild(dd);
  
   function localLoad(files) {
       if (files.length == 1) {
            document.title = escape(files[0].name);
            var reader = new FileReader();
            reader.onload = function(e) {
              myCodeMirror.setValue(e.target.result);
            };
            reader.readAsText(files[0]);
         }
    }
</script>

code_mirror Framework_Front-End How-to JavaScript

Mami Mahfoud April 05, 2021

How-to create html editor with context buttons

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

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

How-to select & copy code from codemirror editor with button

Meta keywords generator tool for Blogger

How to add a quick edit button in Blogger

Getting height and width when resizing two divs at the same time

Create direct download link for google drive file online

How-to select & copy code from codemirror editor with button