CodeMirror使用方法

16.8k 前端 3评论

CodeMirror是一个运行在浏览器中的在线代码编辑器,支持100多种语言,高度可定制。 支持语言有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。 以及diff、LaTeX、SQL、wiki、Markdown等文件格式。 CodeMirror为各种编程语言实现关键字、函数、变量等代码高亮显示丰富的API可扩展功能以及多个主题样式。 如果要在页面中需要嵌入一个代码编辑区,CodeMirror是最佳的选择。 如下是快速上手的CodeMirror使用方法

1 下载

CodeMirror的官网是:http://codemirror.net/
代码托管在Github上,下载地址:https://github.com/codemirror/CodeMirror/archive/master.zip

2 安装

下载源码后,解压到站点目录,然后分别引入JS和CSS文件。

2.1 引入CSS文件

<link href=codemirror/lib/codemirror.css rel=stylesheet type=text/css>
<link href=codemirror/theme/monokai.css rel=stylesheet type=text/css>
<link href=codemirror/addon/display/fullscreen.css rel=stylesheet type=text/css>

以上文件中, – codemirror.css:必须引入,是CodeMirror的核心样式文件。

  • monokai.css:是编辑器模板,可以根据需要修改。
  • fullscreen.css:全屏支持样式文件。

2.2 引入JS文件

这里我们以HTML混合语言支持为例,HTML混合语言包括HTML标签、CSS和JavaScript。 需要引入下面的文件。

<!-- 引入CodeMirror核心文件 -->
<script type=text/javascript src=codemirror/lib/codemirror.js></script>

<!-- CodeMirror支持不同语言,根据需要引入JS文件 -->
<!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持,所以都要引入 -->
<script type=text/javascript src=codemirror/mode/javascript/javascript.js></script>
<script type=text/javascript src=codemirror/mode/xml/xml.js></script>
<script type=text/javascript src=codemirror/mode/css/css.js></script>
<script type=text/javascript src=codemirror/mode/htmlmixed/htmlmixed.js></script>

<!-- 下面分别为显示行数、括号匹配和全屏插件 -->
<script type=text/javascript src=codemirror/addon/selection/active-line.js></script>
<script type=text/javascript src=codemirror/addon/edit/matchbrackets.js></script>
<script type=text/javascript src=codemirror/addon/display/fullscreen.js></script>

2.3 配置

通过JavaScript配置CodeMirror的基本信息,如下:

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById(code), {
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: true,    // 自动换行
        theme: 'monokai',      // 使用monokai模版
    });
    editor.setOption("extraKeys", {
        // Tab键换成4个空格
        Tab: function(cm) {
            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
            cm.replaceSelection(spaces);
        },
        // F11键切换全屏
        F11: function(cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        // Esc键退出全屏
        Esc: function(cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    });
</script>

这里,我们为idcode的文本框添加CodeMirror编辑器样式。 注意,这段代码必须在<textarea>标签的后面,或者用window.onload加载。如果要设置编辑器的高度、宽度和字体,请在CSS里面设置.CodeMirror

3 使用

接着,我们在HTML中添加一个form表单:

<form action=post.php method=post>
    <textarea id=code name=code>HTML CONTENT</textarea>
</form>

注意,如果textarea里面是PHP输出的内容,请保证前后无空格,否则提交时会有多余空格插入内容,应该为如下格式:

    <textarea id=code name=code><?= $code ?></textarea>

然后,在表单提交之前,我们同步CodeMirror的数据到textarea就可以啦:

$(form).on('submit', function(e){
    editor.save();
    // 或者获取数据
    // var data = editor.getValue();
}

这样,就可以用上了一个强大的在线代码编辑器了。

3条评论

爱jquery says: 回复

MARK一下 非常有用!

w
wqp says: 回复

不知道您博客里codemirror的版本号,能不能留一下

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

昵称 *