KindEditor插件之代码高亮

 

前序:由于工作需要使用在线编辑器,找了几个对比了下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;}

关于图标大家海捞吧...

哎...做个好人吧,把需要的图标列一下,如果觉得不好,那么网上捞吧.

           

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2011-08-06 04:10  码魂  阅读(7980)  评论(1)  编辑  收藏  举报

导航