为KindEditor添加插入代码功能

关于插入代码

博客园吸引我的一个很重要的原因就是因为后台编辑器里的插入代码功能，之前在自己博客里使用的是wordpress，编辑器使用十分不便，只能插入blockquote来当作代码显示，但这样没有代码高亮功能。我们这里讲到的插入代码其实就是在代码外部包裹在<pre></pre>内部，我们知道<pre>标签具有保持原有格式的功能，再使用代码高亮js库SyntaxHighlighter就可以对页面中的代码进行高亮了。

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

步骤一：外围工作

首先找到一个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核心库中:

/**插入代码插件
 * 作者:walkingp
 * 主页:http://www.51obj.cn/  http://www.cnblogs.com/walkingp
 * Email:walkingp@126.com
 * 日期：2011-4-20
 */

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);	
	}
};

最后效果图：

完整代码打包下载

参考：http://www.dengguibao.cn/blog/56

posted @ 2011-04-20 13:14  walkingp  阅读(9811)  评论(9)    收藏  举报