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: ,

      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

巴特西

CodeMirror 在线代码编辑器

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

最新文章

热门文章