kindeditor 添加代码插件

zfm1988 · 发表于 2011-2-1 21:38:21

本帖最后由 zfm1988 于 2011-2-1 21:54 编辑

在这里潜水了也好久了，学了不少东西！！再次感谢大家，今天天贴一贴，kindeditor添加代码功能
首先下载两个两个我已经修改好了的插件，前台配合SyntaxHighlighter 使用，这个最新版本已经支持自动加载brush了，很不错。kindeditor-plugin.js
kindeditor-plugin.css

内容

JS复制代码

KE.lang['code'] = "插入代码";
KE.plugin['code'] = {
click : function(id) {
KE.util.selection(id);
var dialog = new KE.dialog({
id : id,
cmd : 'code',
width : 400,
height : 300,
title : KE.lang['code'],
yesButton : KE.lang['yes'],
noButton : KE.lang['no']
});
dialog.show();
},
exec : function(id) {
KE.util.select(id);
var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
var type = KE.$('codeType', dialogDoc).value;
var html = KE.$('textArea', dialogDoc).value;
html = "<pre class=\"brush: " + type + "\">" + html + "</pre>";
html = html.replace(/&/g, "&");
html = html.replace(/&/g, "&");
html = html.replace(/</g, "<");
html = html.replace(/>/g, ">");
var re = new RegExp("\r\n|\n|\r", "g");
html = html.replace(re, "<br />$&");
KE.util.insertHtml(id, html);
KE.layout.hide(id);
KE.util.focus(id);
}
};

复制代码

CSS复制代码

.ke-icon-code {
background-image: url('code.gif');
background-position: 0 0;
width: 16px;
height: 16px;
}

复制代码

再在plugin文件里面添加code.html 内容如下

HTML复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Code</title>
<style type="text/css" rel="stylesheet">
body {
margin: 0px;
font-size:12px;
background-color:#F0F0EE;
}
#textArea {
width:320px;
height:250px;
border:1px solid #000000;
margin-top:5px;
overflow: auto;
}
</style>
</head>
<body>
<select id="codeType">
<option value="js">JavaScript</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="

HP">

HP</option>
<option value="

ERL">

erl</option>
<option value="JAVA">Java</option>
<option value="CPP">C++</option>
<option value="CSHARP">C#</option>
<option value="XML">XML</option>
<option value="

LAIN">其它</option>
</select>
<textarea id="textArea" style="width:390px;height:250px;border:1px solid #000000;"></textarea>
</body>
</html>

复制代码

好了，再把像样的插件加入到内容中就可以使用了，我的是如下

HTML复制代码

复制代码

最后在文章中添加kindershow事件就可以了，
如下

HTML复制代码

复制代码

kindeditor 附近如下

kindeditor.rar (393.88 KB, 下载次数: 50)

qfish · 发表于 2011-3-13 10:14:19

新手学习~试一下~

		自动登录	找回密码
密码			入住 CI 中国社区

[插件 Plugin] kindeditor 添加代码插件

评分

[插件 Plugin] kindeditor 添加代码 插件

评分

[插件 Plugin] kindeditor 添加代码插件