How-to create html editor with context buttons

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>

☷✎

How-to create html editor with context buttons

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

Custom permalink creator for blogger

GIMP: A Powerful Open-Source Image Editing Software

blogger meta description generator

How-to create html editor with context buttons

Related

Comments

Post a Comment