Codemirror在线编辑器基本用法

官网     git代码

基础用法：（含功能：折叠代码、自动补全、主题设置）

 <div class="edit-theme-code">
      <textarea name="code" id="code"></textarea>
 </div>
 
<link rel="stylesheet" href="codemirror/lib/codemirror.css?v=1.0">
<script src="codemirror/lib/codemirror.js"></script>
 
<!--主题-->
<link rel="stylesheet" href="codemirror/theme/abbott.css?v=1.0">
 
<!--括号匹配-->
<script src="codemirror/addon/edit/matchbrackets.js"></script>
 
<!--自动补全-->
<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/hint/css-hint.js"></script>
<script src="codemirror/addon/hint/javascript-hint.js"></script>
<script src="codemirror/addon/hint/html-hint.js"></script>
<script src="codemirror/addon/hint/xml-hint.js"></script>
<script src="codemirror/addon/hint/anyword-hint.js"></script>
 
 
<!-- 折叠代码-->
<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css">
<script src="codemirror/addon/fold/foldcode.js"></script>
<script src="codemirror/addon/fold/foldgutter.js"></script>
<script src="codemirror/addon/fold/brace-fold.js"></script>
<script src="codemirror/addon/fold/comment-fold.js"></script>
<script src="codemirror/addon/fold/markdown-fold.js"></script>
<script src="codemirror/addon/fold/xml-fold.js"></script>
<script src="codemirror/addon/fold/indent-fold.js"></script>
 
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/css/css.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
 
<script>
//根据DOM元素的id构造出一个编辑器
 
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "htmlmixed",
        lineNumbers: true,  //显示行号
        lineWrapping: true,   // 自动换行
        matchBrackets : true, //括号匹配
        styleActiveLine : true,  显示选中行的样式
        theme: "abbott",                  // 主题配置
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter','CodeMirror-lint-markers'],
        foldGutter: true, /// 启用行槽中的代码折叠
        lint: true,                     // 代码出错提醒
        hintOptions:{  // 自定义提示选项
            completeSingle:false, // 当匹配只有一项的时候是否自动补全
        },
        onBlur: function(){editor.save()}
});
   //2022-1-18 按下展示提示框
    editor.on("keypress",function () {
        editor.showHint();
    });
</script>

根据文件类型动态设置mode：

 // 2022-1-18 动态更改mode
 if(file_type == 'js'){
    editor.setOption('mode','text/javascript');
 }else if(file_type == 'css' || file_type == 'less' || file_type == 'map'){
    editor.setOption('mode','text/css');
 }else if(lower_url == 'html'){
    editor.setOption('mode','htmlmixed');
}