主题: kindeditor编辑器源码模式下代码高亮的实现
作者: ljcyabc, 发布日期: 2014-06-05 13:20:01, 浏览数: 3822
环境:
1. kindeditor版本4.1.10
2. 高亮源码插件 codemirror-4.2 ,下载地址www.codemirror.net
3. 复制html代码,替换js和css的引用路径,保存成html文件

4. 直接运行html文件查看演示

5. codemirror的其他功能配置,参照codemirror官方文档


<!doctype html>
<html>
<head>
    <title></title>
    <link href="editor/themes/default/default.css" rel="stylesheet" type="text/css" />
    <script src="../Commonjs/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="editor/kindeditor.js" type="text/javascript"></script>
    <!--以下源码高亮js及样式-->
    <link href="js/codemirror-4.2/lib/codemirror.css" rel="stylesheet" type="text/css" />
    <script src="js/codemirror-4.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/mode/xml/xml.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/mode/javascript/javascript.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/mode/htmlembedded/htmlembedded.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/mode/css/css.js" type="text/javascript"></script>
    <!--代码折叠js和样式-->
    <link href="js/codemirror-4.2/addon/fold/foldgutter.css" rel="stylesheet" type="text/css" />
    <script src="js/codemirror-4.2/addon/fold/foldcode.js" type="text/javascript"></script>
    <script src="js/codemirror-4.2/addon/fold/foldgutter.js" type="text/javascript"></script>
    <!--html代码可折叠-->
    <script src="js/codemirror-4.2/addon/fold/xml-fold.js" type="text/javascript"></script>
    <!--js代码折叠-->
    <script src="js/codemirror-4.2/addon/fold/brace-fold.js" type="text/javascript"></script>
    <!--匹配括号-->
    <script src="js/codemirror-4.2/addon/edit/matchbrackets.js" type="text/javascript"></script>
    <!--匹配标签-->
    <script src="js/codemirror-4.2/addon/edit/matchtags.js" type="text/javascript"></script>
    <style>
        .ke-icon-source1
        {
            background-image: url(editor/themes/default/default.png);
            background-position: 0px 0px;
            width: 16px;
            height: 16px;
        }
    </style>
</head>
<body>
    <div>
        <textarea id="formContent" style="width: 99%; height: 340px;"></textarea>
    </div>
</body>
</html>
<script>
    (function () {
        var code;

        /*创建source1插件,替代原有的source切换功能*/
        KindEditor.plugin('source1', function (K) {
            var self = this;
            self.clickToolbar('source1', function () {
                if (self.edit.designMode) {
                    //源码模式下,头部插件被禁用
                    self.toolbar.disableAll(true);
                    //重新启用source1插件
                    self.toolbar.enable('source1');
                    self.edit.design(false);
                    self.toolbar.select('source1');

                    if (!code) {
                        //创建高亮容器
                        codemirrorInit();
                    } else {
                        //显示高亮容器
                        $('.CodeMirror').show();
                    }
                    //将kindeditor中源码编辑器内容赋值给高亮容器
                    code.setValue(code.getTextArea().value);

                } else {
                    //将高亮容器中的代码赋值给kindeditor源码编辑器
                    code && code.save();
                    //隐藏高亮容器
                    $('.CodeMirror').hide();

                    self.toolbar.disableAll(false);
                    self.edit.design(true);
                    self.toolbar.unselect('source1');
                    if (KindEditor.GECKO) {
                        setTimeout(function () {
                            self.cmd.selection();
                        }, 0);
                    } else {
                        self.cmd.selection();
                    }
                }
                self.designMode = self.edit.designMode;
            });


        });

        /*创建kindeditor编辑器*/
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('#formContent', {
                allowFormatMode: false,
                autoHeightMode: false,
                resizeType: 0,
                designMode: true,
                allowFileManager: true,
                resizeMode: 2,
                allowPreviewEmoticons: false,
                filterMode: false,
                newlineTag: 'br',
                fullscreenMode: false,
                useContextmenu: true,
                items: ['source1', 'table']
            });
        });

        /*创建高亮容器,具体属性和功能请参照codemirror文档*/
        var codemirrorInit = function () {
            code = CodeMirror.fromTextArea($("textarea")[0], {
                //显示行号
                lineNumbers: true,
                mode: "application/x-ejs",
                //缩近位数
                indentUnit: 4,
                indentWithTabs: true,
                //是否自动换行
                lineWrapping: false,
                //是否显示代码折叠
                foldGutter: true,
                //代码折叠快捷键
                extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                //匹配括号
                matchBrackets: true,
                //匹配标签
                matchTags: { bothTags: true }
            });
        }
    })();
</script>


作者: ljcyabc, 发布日期: 2014-06-05 17:13:53
回复
作者: ljcyabc, 发布日期: 2014-06-05 17:14:32
回复
发表新帖 发表回复