代码编辑器 - AuxUI - 模块化前端UI框架

auxui 的代码编辑器，取材于codemirror-5.3x ，我们只是简单的封装，更多文档请参阅 codemirror 官方文档：https://codemirror.net/

需要加载codemirror模块，可通过下列方式加载

//加载模块
auxui(['codemirror'], function (codemirror){

//加载后执行一些动作和事件处理

});

实例

可以通过css .CodeMirror{height: auto;}设置编辑器高度和宽度。

<textarea id="editor" style="height:100px;border:1px #ddd solid;"></textarea>
    <div style="padding: 10px 0">
        主题：
        <select class="form-control" id="select" style="width: 200px;display: inline-block;">
            <option selected="">default</option>
            <option>3024-day</option>
            <option>3024-night</option>
            <option>abcdef</option>
            <option>ambiance</option>
            <option>base16-dark</option>
            <option>base16-light</option>
            <option>bespin</option>
            <option>blackboard</option>
            <option>cobalt</option>
            <option>colorforth</option>
            <option>darcula</option>
            <option>dracula</option>
            <option>duotone-dark</option>
            <option>duotone-light</option>
            <option>eclipse</option>
            <option>elegant</option>
            <option>erlang-dark</option>
            <option>gruvbox-dark</option>
            <option>hopscotch</option>
            <option>icecoder</option>
            <option>idea</option>
            <option>isotope</option>
            <option>lesser-dark</option>
            <option>liquibyte</option>
            <option>lucario</option>
            <option>material</option>
            <option>mbo</option>
            <option>mdn-like</option>
            <option>midnight</option>
            <option>monokai</option>
            <option>neat</option>
            <option>neo</option>
            <option>night</option>
            <option>oceanic-next</option>
            <option>panda-syntax</option>
            <option>paraiso-dark</option>
            <option>paraiso-light</option>
            <option>pastel-on-dark</option>
            <option>railscasts</option>
            <option>rubyblue</option>
            <option>seti</option>
            <option>shadowfox</option>
            <option>solarized dark</option>
            <option>solarized light</option>
            <option>the-matrix</option>
            <option>tomorrow-night-bright</option>
            <option>tomorrow-night-eighties</option>
            <option>ttcn</option>
            <option>twilight</option>
            <option>vibrant-ink</option>
            <option>xq-dark</option>
            <option>xq-light</option>
            <option>yeti</option>
            <option>zenburn</option>
        </select>
    </div>
    <script type="text/javascript">
    auxui(['jquery', 'codemirror'], function($, CodeMirror) {
        var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true, // 显示行号
            indentUnit: 4, // 缩进单位为4
            styleActiveLine: true, // 当前行背景高亮
            matchBrackets: true, // 括号匹配
            //theme: 'zenburn',    // 编辑器主题
            //readOnly:true,       // 只读模式
            lineWrapping: true // 自动换行
        });
        $('#select').change(function(event) {
            editor.setOption("theme", $(this).val());
        });
    });
    </script>

主题：

高亮代码

我们简单封装了一些常用编辑器支付代码类型参考如下：

名称	描述
mode_css	CSS代码
mode_htmlmixed	支持CSS，HTML,javascript,XML代码
mode_http	HTTP超文本传输协议
mode_javascript	javascript代码
mode_jsx	jsx代码
mode_nginx	nginx代码
mode_php	php代码
mode_shell	shell代码
mode_sql	sql代码
mode_vb	vb代码
mode_vbscript	VBScript代码
mode_xml	xml代码

<textarea id="editor2" style="height:100px;border:1px #ddd solid;"></textarea>
    <div style="padding: 10px 0">
        主题：
        <select class="form-control" id="select2" style="width: 200px;display: inline-block;">
            <option selected="">default</option>
            <option>3024-day</option>
            <option>3024-night</option>
            <option>abcdef</option>
            <option>ambiance</option>
            <option>base16-dark</option>
            <option>base16-light</option>
            <option>bespin</option>
            <option>blackboard</option>
            <option>cobalt</option>
            <option>colorforth</option>
            <option>darcula</option>
            <option>dracula</option>
            <option>duotone-dark</option>
            <option>duotone-light</option>
            <option>eclipse</option>
            <option>elegant</option>
            <option>erlang-dark</option>
            <option>gruvbox-dark</option>
            <option>hopscotch</option>
            <option>icecoder</option>
            <option>idea</option>
            <option>isotope</option>
            <option>lesser-dark</option>
            <option>liquibyte</option>
            <option>lucario</option>
            <option>material</option>
            <option>mbo</option>
            <option>mdn-like</option>
            <option>midnight</option>
            <option>monokai</option>
            <option>neat</option>
            <option>neo</option>
            <option>night</option>
            <option>oceanic-next</option>
            <option>panda-syntax</option>
            <option>paraiso-dark</option>
            <option>paraiso-light</option>
            <option>pastel-on-dark</option>
            <option>railscasts</option>
            <option>rubyblue</option>
            <option>seti</option>
            <option>shadowfox</option>
            <option>solarized dark</option>
            <option>solarized light</option>
            <option>the-matrix</option>
            <option>tomorrow-night-bright</option>
            <option>tomorrow-night-eighties</option>
            <option>ttcn</option>
            <option>twilight</option>
            <option>vibrant-ink</option>
            <option>xq-dark</option>
            <option>xq-light</option>
            <option>yeti</option>
            <option>zenburn</option>
        </select>
    </div>
    <script type="text/javascript">
    auxui(['jquery', 'codemirror'], function($, CodeMirror) {

//加载代码类型
        require(['mode_htmlmixed'], function() {

var editor2 = CodeMirror.fromTextArea(document.getElementById("editor2"), {
                lineNumbers: true, // 显示行号
                indentUnit: 4, // 缩进单位为4
                styleActiveLine: true, // 当前行背景高亮
                matchBrackets: true, // 括号匹配
                mode: 'htmlmixed',
                //theme: 'zenburn',    // 编辑器主题
                //readOnly:true,       // 只读模式
                lineWrapping: true // 自动换行
            });

$('#select2').change(function(event) {
                editor2.setOption("theme", $(this).val());
            });

});
    });
    </script>

主题：

更多帮助详情官网文档，https://codemirror.net