利用CodeMirror构建在线IDE随记

一、引入需要的js、css

<!--核心文件-->
<script src="/codemirror-5.33.0/lib/codemirror.js"></script>
<link rel="stylesheet" href="/codemirror-5.33.0/lib/codemirror.css">
<script src="/codemirror-5.33.0/mode/clike/clike.js"></script>
<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="/codemirror-5.33.0/theme/eclipse.css">
<link rel="stylesheet" href="/codemirror-5.33.0/theme/seti.css">
<link rel="stylesheet" href="/codemirror-5.33.0/theme/dracula.css">

<!--支持代码折叠-->
<link rel="stylesheet" href="/codemirror-5.33.0/addon/fold/foldgutter.css"/>
<script src="/codemirror-5.33.0/addon/fold/foldcode.js"></script>
<script src="/codemirror-5.33.0/addon/fold/foldgutter.js"></script>
<script src="/codemirror-5.33.0/addon/fold/brace-fold.js"></script>
<script src="/codemirror-5.33.0/addon/fold/comment-fold.js"></script>

<!--全屏模式-->
<link rel="stylesheet" href="/codemirror-5.33.0/addon/display/fullscreen.css">
<script src="/codemirror-5.33.0/addon/display/fullscreen.js"></script>

<!--括号匹配-->
<script src="/codemirror-5.33.0/addon/edit/matchbrackets.js"></script>

<!--自动补全-->
<link rel="stylesheet" href="/codemirror-5.33.0/addon/hint/show-hint.css">
<script src="/codemirror-5.33.0/addon/hint/show-hint.js"></script>
<script src="/codemirror-5.33.0/addon/hint/anyword-hint.js"></script>

二、利用textare生成编辑器

这里需要一个textare元素

<textareaid="code"></textarea>

三、创建编辑器对象（这里列出一些常用的配置）

<script type="text/javascript">
    //根据DOM元素的id构造出一个编辑器
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        //实现Java代码高亮
        mode: "text/x-java",

        //设置显示行号
        lineNumbers: true,

        //设置主题
        theme: "eclipse",

        //在长行时文字是换行(wrap)还是滚动(scroll)，默认为滚动(scroll)
        lineWrapping: "wrap",

        //在选择时是否显示光标，默认为false
        showCursorWhenSelecting: true,

        //光标高度。默认为1
        cursorHeight: 0.85,

        //代码折叠
        lineWrapping: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

        // //全屏模式
        // fullScreen: false,

        //括号匹配
        matchBrackets: true,

        //智能缩进
        smartIndent : true,

        //智能提示
        extraKeys: {
            "Alt-/": "autocomplete", "F11": function (cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            }
        }
    });

       //设置初始值
    editor.setValue("//使用Alt+/ 可以提示代码   F11开关全屏模式\n");
</script>

四、完成上述操作就实现了一个简单的编辑器