kindeditor 添加代码 插件
本帖最后由 zfm1988 于 2011-2-1 21:54 编辑在这里潜水了也好久了，学了不少东西！！再次感谢大家，今天天贴一贴，kindeditor添加代码功能
首先下载两个两个我已经修改好了的插件，前台配合SyntaxHighlighter 使用，这个最新版本已经支持自动加载brush了，很不错。kindeditor-plugin.js
kindeditor-plugin.css
内容
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.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);
}
};
.ke-icon-code {
background-image: url('code.gif');
background-position: 0 0;
width: 16px;
height: 16px;
}
再在plugin文件里面添加code.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="PHP">;PHP</option>
<option value="PERL">;Perl</option>
<option value="JAVA">Java</option>
<option value="CPP">C++</option>
<option value="CSHARP">C#</option>
<option value="XML">XML</option>
<option value="PLAIN">其它</option>
</select>
<textarea id="textArea" style="width:390px;height:250px;border:1px solid #000000;"></textarea>
</body>
</html>
好了，再把像样的插件加入到内容中就可以使用了，我的是如下
<link href="<?php echo base_url();?>application/views/admin/kindeditor/kindeditor-plugin.css" rel="stylesheet" type="text/css">
<script charset="utf-8" src="<?php echo base_url();?>application/views/admin/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<?php echo base_url();?>application/views/admin/kindeditor/kindeditor-plugin.js"></script>
最后在文章中添加kindershow事件就可以了，
如下
<script type="text/javascript">
KE.show({
id : 'content',
resizeMode : 1,
filterMode : false,
allowUpload : true,
allowFileManager : true,
cssPath : './css/common.css',
items : [
'source', '|', 'fullscreen', 'print', 'undo', 'redo', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', '|', 'code', '-',
'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
'italic', 'underline', 'strikethrough', 'removeformat', 'selectall', '|', 'image',
'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'
]
});
</script>
kindeditor 附近如下
新手学习~试一下~
页:
[1]