文章转自:
http://www.baiyuxiong.com/?p=426
实现原理:
利用一个jquery的代码高亮插件:SyntaxHighlighter
当HTML代码中有类似:
<pre name="code" class="vb">
</pre>
的代码的时,SyntaxHighlighter会自动将这个标签内的代码高亮。
实现方法:
1、给kindeditor加一个插件,在编辑栏上加一个图标,当点击这个图标时,内容部分会添加上这样的代码:
<pre name="code" class="vb">
</pre>
代码如下:
<script type="text/javascript">
//定义插件
KE.lang['hello'] = "可支持语言:php,csharp...";
KE.plugin['hello'] = {
click : function(id) {
KE.util.selection(id);
var html = '<pre name="code" class="php">You php code here.</pre>';
KE.util.insertHtml(id, html);
KE.layout.hide(id);
KE.util.focus(id);
}
};
//显示插件
KE.show({
id : 'content1',
cssPath : './index.css',
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
},
items : [
'source', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'selectall', '-',
'title', 'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold',
'italic', 'underline', 'strikethrough', 'removeformat', 'image',
'flash', 'media', 'table', 'hr', 'emoticons', 'link', 'unlink', 'about','hello'],//在最后面加上hello插件
});
</script>
<textarea id="content1" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
这样添加后,编辑栏上并没有加上图标,因为我们没有指定背景图片。所以找到kindeditor\skins\default.css 给里面加一句CSS(注意样式名称是ke-icon-后面加上插件的名称):
.ke-icon-hello{
background-image:url(./../plugins/emoticons/qq.gif);
width: 16px;
height: 16px;
}
续:
http://baiyuxiong.iteye.com/blog/778833