前序:由于工作需要使用在线编辑器,找了几个对比了下KindEditor还是不错的,国产的.但文档还是不全,还好能参考官方插件,套出来一些插 件.本文章分为4个部分,分别介绍图片上传插件、代码高亮插件、引用文本以及附件插件的制作。网上大部分都是直接或改官方的JSP文件，连action都 没有用，太不专业了。在上传附件或图片的时候写action上传不了居然还将web.xml中的<url-pattern>/*< /url-pattern>换为：<url-pattern>*.action</url-pattern>这样以来势必 会影响到其他地方。本文主要讲解插件的详细制作过程以及问题的处理，均为结合Struts2的标准方式，绝无什么水货处理方式！
KindEditor官方:http://www.kindsoft.net/
KindEditor4.0测试版Demo:http://www.kindsoft.net/ke4/php/demo.php
注意：KindEditor官方4.0下月发布正式版，已经有了代码高亮、附件上传等插件，如果你能等的话就暂扫一下我的文章就可以了！！！
KindEditor插件之代码高亮
代码高亮这个功能对于我们这些个coder来说很有用处,所以我们写一个,怎么写?
1.先去别人的页面上盗取下来一个代码选择的页面,自己写也可以,就一个下拉框,一个文本域就完了.
我这里是盗用OSCHINA的:
狠狠的展开我 1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <title>KindEditor</title>
6 </head>
7 <body style='background:#f0f0ee;font-size:9pt;'>
8 <table border="0" cellpadding="0" cellspacing="0">
9 <tr>
10 <td style='padding-bottom:10px;'>
11 <select id='ic_lang' name='lang'>
12
13 <option value=''>[选择编程语言]</option>
14 <option value='java'>Java</option>
15 <option value='cpp'>C/C++/Objective-C</option>
16 <option value='c#'>C#</option>
17 <option value='js'>JavaScript</option>
18 <option value='php'>PHP</option>
19
20 <option value='perl'>Perl</option>
21 <option value='python'>Python</option>
22 <option value='ruby'>Ruby</option>
23 <option value='html'>HTML</option>
24 <option value='xml'>XML</option>
25 <option value='css'>CSS</option>
26
27 <option value='vb'>ASP/Basic</option>
28 <option value='pascal'>Delphi/Pascal</option>
29 <option value='scala'>Scala</option>
30 <option value='groovy'>Groovy</option>
31 <option value='lua'>Lua</option>
32 <option value='sql'>SQL</option>
33
34 <option value='cpp'>Google Go</option>
35 <option value='as3'>Flash/ActionScript/Flex</option>
36 <option value='sliverlight'>WPF/SliverLight</option>
37 <option value='shell'>Shell/批处理</option>
38 </select>
39 以便系统进行正确的语法着色
40 </td>
41
42 </tr>
43 <tr>
44 <td>
45 <textarea name='source' id='ic_source' style='width:500px;height:200px;font-size:9pt;font-family:Courier New,Arial'></textarea>
46 </td>
47 </tr>
48 </table>
49 </body>
50 </html>
你直接用吧,什么都不用改.
放到哪里呢?我们放到js\plugins\code\insert_code.html这里js文件夹下有你的kindeditor.js
有了页面,我们还没有写调用它的代码....
继续,打开你的编辑器页面加入以下javascript:
$(document).ready(function(){
KE.lang['code'] = "插入程序代码或脚本";
KE.plugin['code'] = {click : function(id) {KE.util.selection(id);var dialog = new KE.dialog({id : id,cmd : 'code',file : 'code/insert_code.html',width : 530,height : 300,title : KE.lang['code'],yesButton : KE.lang['yes'],noButton : KE.lang['no']});dialog.show();},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: true; auto-links: false;">';html += html_encode(source);html += '</pre><br/>';KE.util.insertHtml(id, html);KE.layout.hide(id);KE.util.focus(id);}
};
(注意以上代码最后少了"});"复制的不给力...)
你可能会问这都是神马???
智商超过0的人基本都知道这大致做了什么.
我简单说明下KE.lang['code'] = "插入程序代码或脚本";就相当于定义常量而已.
点击工具栏中的定义插件就是那个click...我们用的是KindEditor自己带的弹出框,当然你用你自己喜欢的也可以.
注意file这个属性,它是相对plugin目录来写的,注意下...
对于这个插件其实没什么可以解释的了,照搬吧....
最后还有一点...我们的工具栏还是没有显示出来图标....
加入样式:
.ke-icon-code {background-image: url(images/code.gif);background-position: 0px 0px;width: 16px;height: 16px;
}
好了,搞定???
其实是搞定了,只是没有高亮而已(什么话!做高亮不高亮还叫搞定了?插件确实完成了...)
我们只需要加入一个高亮javascript库即可.当然是选用SyntaxHighlighter插件喽!然后如下
<script type="text/javascript" src="js/syntax/brush.js"></script>
<link type="text/css" rel="stylesheet" href="js/syntax/shCore.css"/>
<link type="text/css" rel="stylesheet" href="js/syntax/shThemeDefault.css"/>
<style></style>
<script type='text/javascript'>
<!--
$(document).ready(function(){SyntaxHighlighter.config.clipboardSwf = 'js/syntax/clipboard.swf';SyntaxHighlighter.all();
});
//-->
</script><link rel="stylesheet" href="css/ke.css" type="text/css"/></head>
ke.css是神马???
在图片上传中我解释了,在这里我在说下,我们在编辑器中插入代码了,怎么所见即所得呢?就需要这个ke.css来做插入代码的样式
在这里我全列出来,自己则取修改吧(里面还包含引用文本插件的一些CSS留着吧,下一讲你就不用再费事了):
.TextContent {font-size: 10.5pt;
}
.TextContent p {line-height: 20px;margin-bottom: 20px;
}
.TextContent pre {-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: none repeat scroll 0 0 #F6F6F6;border-color: #DDDDDD #DDDDDD #DDDDDD #6CE26C;border-style: solid;border-width: 1px 1px 1px 5px;font-family: Courier New,Arial;font-size: 9pt;margin: 10px 0;padding: 5px;
}
.TextContent blockquote {background: url("../images/blockquote.gif") no-repeat scroll left top #F4F5F7;border: 2px solid #EEEEEE;color: #006600;font-size: 9pt;margin: 15px 10px;padding: 5px 5px 5px 35px;
}
.TextContent img {max-width: 700px;
}
.ke-flash {
border:1px solid #AAAAAA;
background-image:url(./flash.gif);
background-position:center center;
background-repeat:no-repeat;
width:100px;
height:100px;
}
.ke-rm {
border:1px solid #AAAAAA;
background-image:url(./rm.gif);
background-position:center center;
background-repeat:no-repeat;
width:100px;
height:100px;
}
.ke-media {
border:1px solid #AAAAAA;
background-image:url(./media.gif);
background-position:center center;
background-repeat:no-repeat;
width:100px;
height:100px;
}
.ke-content {
font-size: 10pt;
}
.ke-content pre {
font-size:9pt;
font-family:Courier New,Arial;
border:1px solid #ddd;
border-left:5px solid #6CE26C;
background:#f6f6f6;
padding:5px;
}
.ke-content p {
margin: 0 0 15px 0;
}
.ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;}
.ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;}
.ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;}
.ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../images/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}
关于图标大家海捞吧...
哎...做个好人吧,把需要的图标列一下,如果觉得不好,那么网上捞吧.
