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> © Manajmnt code Share to : ☷✎ Comments
Comments
Post a Comment
message