js代码在线运行

本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

在编程中，实现代码的在线功能是非常迫切的需求。在js中有这样一个编辑器，能够实现代码的在线高亮，很多人都忽略了它的存在。这个编辑器就是codemirror，如果使用过一些基础库的人，可能见过它的身影。下面我们就codemirror概念、用法，以及配置项的在线运行为大家展开讲解。

1.codemirror概念

codemirror 基于Javascript，短小精悍，实时在线代码高亮显示，它不是某个富文本编辑器的附属产品，它是许多大名鼎鼎的在线代码编辑器的基础库。

2.codemirror用法

var editor = CodeMirror.fromTextArea(document.getElementById("htmlEdit"), {
    lineNumbers: false,
    mode: "htmlmixed",
    indentUnit: 2,
    lineWrapping:true,
    styleActiveLine: true
});

3.codemirror配置项

cmOptions: {
        // codemirror config
        flattenSpans: false, // 默认情况下，CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能
        tabSize: 2, // tab缩进空格数
        mode: '', // 模式
        theme: 'monokai', // 主题
        smartIndent: true, // 是否智能缩进
        lineNumbers: true, // 显示行号
        matchBrackets: true, // 匹配符号
        lineWiseCopyCut: true, // 如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行
        indentWithTabs: true, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符
        electricChars: true, // 在输入可能改变当前的缩进时，是否重新缩进
        indentUnit: 2, // 缩进单位，默认2
        autoCloseTags: true, // 自动关闭标签
        autoCloseBrackets: true, // 自动输入括弧
        foldGutter: true, // 允许在行号位置折叠
        cursorHeight: 1, // 光标高度
        keyMap: 'sublime', // 快捷键集合
        extraKeys: {
          'Ctrl-Alt': 'autocomplete',
          'Ctrl-Q': cm => {
            cm.foldCode(cm.getCursor())
          }
        }, //智能提示
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], // 用来添加额外的gutter
        styleActiveLine: true // 激活当前行样式
      },

以上就是js代码在线运行，我们可以使用codemirror编辑器的一些操作。有这类需求的人，可以尝试使用codemirror的一些基础用法。