CodeMirror介绍

半兽人 发表于: 2018-12-07   最后更新时间: 2021-01-02 22:26:34  
{{totalSubscript}} 订阅, 4,835 游览

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求。

CodeMirror支持大量语言的语法高亮,包括CC++C#JavaPerlPHPJavaScriptPythonLuaGoGroovyRuby等,以及diffLaTeXSQLwikiMarkdown等文件格式。此外,CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。

CodeMirror采用MIT开源许可协议,目前已经被集成到各种应用程序中,如Adobe BracketsCoDevLight Table等开发环境,还被作为各种SQLHaxeJavaScript在线编辑器的基础库来使用。

CodeMirror开发者近日发布了3.0版本。该版本进行了一些改进,如果你使用之前的版本,则需要注意,3.0中的API与2.0存在一些不兼容的问题,详细信息见升级向导。此外,重要的是,3.0放弃了对IE7的支持。

使用方法

本文将做简单的介绍,如何使用CodeMirror插件和提交表单。

引入核心文件
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"><//script>

codemirror.csscodemirror.js文件是CodeMirror插件的核心文件,无论你要高亮的代码是何种语言,都要引入这两个文件。

引入代码高亮js

接下来要引入的文件可以根据您的项目需求引入,不必要引入所有文件,比如您要显示html代码,则引入:

<script src="xml.js"><//script>
代码调用
<script>
myTextarea = document.getElementById("code");
  var editor = CodeMirror.fromTextArea(myTextarea, {
    mode: "text/html"
  });
<//script>

myTextarea为您的编辑器dom元素ID,一般使用document.getElementById(“code”)方法获取文本框,如果您使用的jquery,那么需要在代码后面加入[0],比如$(‘#code’)[0]

获取CodeMirror的值

// 该方法得到的结果是经过转义的数据
editor.getValue();

// 该方法得到的结果是未经过转义的数据
editor.toTextArea();
editor.getTextArea().value;

如果是通过 JS 进行表单提交,可以在提交的 JS 代码中这样使用:

// 将 Codemirror 的内容赋值给 Textarea
$("#content").text(editor.getValue());

strong textCodemirror赋值

editor.setValue('为codemirror赋值');

Codemirror Events change事件

Editor.on("change", function (Editor, changes) {
    while (changes) {
    Editor1.replaceRange(changes.text.join("\n"), changes.from, changes.to);
    changes = changes.next;
   }

  });

changes.next不是每次change事件都会有


项目地址:https://codemirror.net/
在线使用手册:https://codemirror.net/doc/manual.html
github地址:https://github.com/marijnh/codemirror

更新于 2021-01-02

查看javascript更多相关的文章或提一个关于javascript的问题,也可以与我们一起分享文章