为KindEditor编辑器添加插入代码功能

如何给KindEditor编辑器添加插入代码功能，我们这里讲到的插入代码其实就是在代码外部包裹在<pre></pre>内部，我们知道<pre>标签具有保持原有格式的功能，再使用代码高亮js库SyntaxHighlighter就可以对页面中的代码进行高亮了。

我们现在要做的就是在KindEditor加入插入<pre>...</pre>代码的插件。

不想自己做的可以直接下载百度云下载

链接: https://pan.baidu.com/s/1H5HxdZy--oEN2-19f0VZ3Q 提取码: h7z7

步骤一

首先找到一个icon图片用于显示在编辑器上，然后把它合并在kindeditor的皮肤文件中default.gif。

然后在editor.css中增加pre样式：

pre{
    background:#f8f8f8;
    border:1px solid #ddd;
    padding:5px;
}

建立弹出层的code.html

<!doctype html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>InsertCode</title> 
        <style type="text/css" rel="stylesheet"> 
            body {
                margin: 0;
                font:12px/1 "sans serif",tahoma,verdana,helvetica;
                background-color:#F0F0EE;
                color:#222222;
                line-height:18px;
            }
            #code {
                width:98%;
                height:260px;
                border:1px solid #ccc;
                overflow: auto;
                resize: none;
            }
            #code:focus {
                outline: none;
            }
            .comment {
                margin-bottom: 10px;
                text-align: left;
            }
        </style> 
        <script type="text/javascript"> 
            var KE = parent.KindEditor;
            location.href.match(/\?id=([\w-]+)/i);
            var id = RegExp.$1;
            KE.event.ready(function() {
                KE.util.pluginLang('code', document);
                KE.util.hideLoadingPage(id);
            }, window, document);
        </script> 
    </head> 
    <body> 
        <div class="comment"> 
            <span id="lang.lang"></span> 
            <br /> 
            <select id="lang" name="lang"> 
                <option value="as3">ActionScript3</option> 
                <option value="bash">Bash/shell</option> 
                <option value="csharp">C#</option> 
                <option value="css">CSS</option> 
                <option value="delphi">Delphi</option> 
                <option value="diff">Diff</option> 
                <option value="groovy">Groovy</option> 
                <option value="xhtml">Html</option> 
                <option value="js">JavaScript</option> 
                <option value="java">Java</option> 
                <option value="jfx">JavaFX</option> 
                <option value="perl">Perl</option> 
                <option value="php">PHP</option> 
                <option value="plain">Plain Text</option> 
                <option value="ps">PowerShell</option> 
                <option value="py">Python</option> 
                <option value="rails">Ruby</option> 
                <option value="scala">Scala</option> 
                <option value="sql">SQL</option> 
                <option value="vb">Visual Basic</option> 
                <option value="xml">XML</option> 
            </select> 
        </div> 
        <div> 
            <span id="lang.code"></span> 
            <br /> 
            <textarea id="code" name="code"></textarea> 
        </div> 
    </body> 
</html>

步骤二

kindeditor的开发是相对比较简单的，详细文档可以参考官方文档。我们这里是把代码直接写入kindeditor核心库中:

KE.plugin['code'] = {
    click : function(id) {
        KE.util.selection(id);
        this.dialog = new KE.dialog({
            id : id,
            cmd : 'code',
            file : 'code.html',
            width : 500,
            height : 350,
            loadingMode : true,
            title : KE.lang['code'],
            yesButton : KE.lang['yes'],
            noButton : KE.lang['no']
        });
        this.dialog.show();
    },
    escape : function( value ) {
            return value.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\"/g, '"').replace(/\'/g, ''');
    },
    check : function(id) {
        var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);
        var lang = KE.$('lang', dialogDoc).value;
        if (!lang) {
            alert(KE.lang['invalidLang']);
            return false;
        }
        return true;
    },
    exec : function(id) {
        var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);
        var lang = KE.$('lang', dialogDoc).value;
        var code = KE.$('code', dialogDoc).value;
        if (!this.check(id)) return false;
        KE.util.insertHtml(id, "<pre class=\"brush:" + lang + ";\">" + this.escape(code) + "</pre>");
        this.dialog.hide(); 
        KE.util.focus(id);  
    }
};