主题: kindeditor编辑器源码模式下代码高亮的实现 |
作者: ljcyabc, 发布日期: 2014-06-05 13:20:01, 浏览数: 4792 |
环境:
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 |
回复 |