CodeMirror 在线代码编辑器

像百度编辑器插件部分、菜鸟教程示例等高德地图都在使用,这里也记录一下:

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件......

vue 中使用 参见:
https://www.npmjs.com/package/vue-codemirror
https://blog.csdn.net/oumaharuki/article/details/79268498

普通使用例如:
<!doctype html>
<title>CodeMirror</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.js"></script>
<script src="xml.js"></script>
<article>
  <form style="border:1px solid red;">
    <textarea id="code" name="code">
    This is an example of EJS (embedded javascript)
    <p>The program says <%= hello("world") %>.</p>
    <script>
      alert("And here is some normal JS code"); // also colored
    </script>
    <div>addd</div>
    </textarea>
  </form>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      mode: "text/html",
      indentUnit: 4,
      indentWithTabs: true
    });
    editor.on("change", function (Editor, changes) {
      console.log('test')
      console.log(Editor)
      console.log(changes)
      console.log(editor.getValue())
    });
  </script>
</article>

 

 

地址:http://codemirror.net/

使用手册:http://codemirror.net/doc/manual.html

github地址:https://github.com/marijnh/codemirror

 

使用方法等,可见前辈整理:

CodeMirror 使用大全 https://www.cnblogs.com/onlyonely/p/4450029.html

 编辑器大全  http://www.html580.com/6399

posted @ 2018-07-25 11:20  James2019  阅读(2416)  评论(0编辑  收藏  举报