kindediter 3.5 整合 SyntaxHighlighter 高亮插件完美解决方案

2014-11-10 16:45:43     21 人阅读    

本教程基于kindediter  @version 3.5 ,SyntaxHighlighter 下载最新版本就行,没影响

kindediter SyntaxHighlighter 完美解决方案高亮插件开发,最近在给  kindediter 整合 SyntaxHighlighter 高亮js插件的时候废了不少时间,晚上找了很多代码都不是很准确,最后还是自己处理的,下面是详细的过程和代码

第一步,新建 code.html,主要是点击kindEditer上的按钮后,弹出来的页面,如果想要让 页面支持自动选择某种语言,就把 <option value=''>[选择编程语言]</option>    替换掉.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>KindEditor</title>
</head>
<body style='background:#f0f0ee;font-size:9pt;'>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style='padding-bottom:10px;'>
                <select id='ic_lang' name='lang'>
                    <option value=''>[选择编程语言]</option>          
                    <option value='java'>Java</option>
                    <option value='cpp'>C/C++/Objective-C</option>
                    <option value='c#'>C#</option>
                    <option value='js'>JavaScript</option>
                    <option value='php'>PHP</option>
                    <option value='perl'>Perl</option>
                    <option value='python'>Python</option>
                    <option value='ruby'>Ruby</option>
                    <option value='html'>HTML</option>
                    <option value='xml'>XML</option>
                    <option value='css'>CSS</option>
                    <option value='asp'>ASP/Basic</option>
                    <option value='pascal'>Delphi/Pascal</option>
                    <option value='scala'>Scala</option>
                    <option value='groovy'>Groovy</option>
                    <option value='lua'>Lua</option>
                    <option value='sql'>SQL</option>
                    <option value='cpp'>Google Go</option>
                    <option value='as3'>Flash/ActionScript/Flex</option>
                    <option value='sliverlight'>WPF/SliverLight</option>
                    <option value='shell'>Shell/批处理</option>
                </select>
                以便系统进行正确的语法着色
            </td>
        </tr>
        <tr>
            <td>
                <textarea name='source' id='ic_source' style='width:500px;height:200px;font-size:9pt;font-family:Courier New,Arial'></textarea>
            </td>
        </tr>
    </table>
</body>
</html>

第二步:
kindeditor.js  中  加入 code:'插入代码',  搜索 KE.lang   在你想要的位置加入
插入的位置如下:

KE.lang = {  
 source : 'HTML代码',  
code:'插入代码',  
 undo : '后退(Ctrl+Z)',  

第三步 在kindeditor.js   文件中找到 KE.setting ,把'code', 插入当中,位置如下

在KE.setting的items里加入code,如: 

items : [  
'source', '|',  'code','image',  
  'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'  
  ]  

第四步 kindeditor.js  中 KE.plugin['source']  下面  加入如下代码
  前提 code.html已经放入到工程中,注意路径

 

//点击按钮填出 code.html
KE.plugin['code'] = {      
    click : function(id) {
        KE.util.selection(id);
        var dialog = new KE.dialog({
            id : id,
            cmd : 'code',
            file : 'code/code.html',
            width : 520,
            height : 280,
            title : KE.lang['code'],
            yesButton : KE.lang['yes'],
            noButton : KE.lang['no']
        });
        dialog.show();
    },
   //点击 code.html 确定按钮后进行页面校验
    check : function(id) {
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        var lang = KE.$('ic_lang', dialogDoc).value;
        var source = KE.$('ic_source', dialogDoc).value;
        if(lang == ''){
            alert('编程语言必须选择');
            return false;
        }
        if(source == ''){
            alert('请输入程序代码或者脚本');
            return false;
        }
        return true;
    },
   //校验成功后执行
    exec : function(id) {
        KE.util.select(id);
        var iframeDoc = KE.g[id].iframeDoc;
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        if (!this.check(id)) return false;
        var lang = KE.$('ic_lang', dialogDoc).value;
        var source = KE.$('ic_source', dialogDoc).value;
        this.insert(id, lang, source);
    },
  //插入到当前页面上...
    insert : function(id, lang,source) {   
        var html = '<pre class="brush:' + lang + '; toolbar: false; auto-links: false;">';
         html += HTMLEncode(source);   
      //处理html关键字
        html += '</pre>';
        KE.util.insertHtml(id, html);
        KE.layout.hide(id);
        KE.util.focus(id);
    }
};

放在与其实插件代码如KE.plugin['source'] 等的旁边。

    看上面红色标准的代码。晚上的其他代码例子基本上没处理,导致在插入html xml等带有html关键字的代码时  kindediter 展示失败,并且会把失败的代码格式化,导致 SyntaxHighlighter  也乱套.....

添加  下面的函数到  kindeditor.js  最下面

function HTMLDecode(str)
   {   
         var s = "";
         if(str.length == 0)   return "";
         s    =    str.replace(/&amp;/g,"&");
         s    =    s.replace(/&lt;/g,"<");
         s    =    s.replace(/&gt;/g,">");
         s    =    s.replace(/&nbsp;/g," ");
         s    =    s.replace(/&#39;/g,"\'");
         s    =    s.replace(/&quot;/g,"\"");
         return   s;   
   } 

输出处理 xml html等   与html关键字冲突的脚本


第五部:
页面中加入如下代码:

<script type="text/javascript">
      KE.show({
          id : 'nr',
          resizeMode : 0,
          skinType: 'tinymce',
          items : [
          'fullscreen','code','undo', 'redo',
          'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright',
          'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 
          'title', 'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold',
          'italic', 'underline', 'strikethrough', 'removeformat', 'image','hr','source'
       ]          
      });
 </script>

第六步、kindeditor\skins\tinymce.css 中加入如下代码

.ke-icon-code {
    background-image: url('../plugins/codeLight/back.png');
    width: 16px;
    height: 16px;
}


原文地址:http://www.itmmd.com/201411/157.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

内存数据库 timesten使用命令导出内存库数据到物理库方法及注意点   上一篇
下一篇  dwz框架 弹出框无法调用onload 解决方法

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!