KindEditor 增加自定义按钮

November 5, 2012

955 views

2250 words

[newcode title="首先打开kindeditor.js文件"]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', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'
],[/newcode]

[newcode title="修改："]
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', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|','page', '|', 'about' ],[/newcode]

[newcode title="找到："]
KE.lang = {
source : 'HTML代码',。。。。[/newcode]
[newcode title="加入："]
page : '插入分页', [/newcode]

[newcdoe title="找到"]KE.plugin['hr'] = {
click : function(id) {
KE.util.selection(id);
KE.util.insertHtml(id, '

');
KE.util.focus(id);
}
};

KE.plugin['print'] = {
click : function(id) {
KE.util.selection(id);
KE.g[id].iframeWin.print();
}
};[/newcode]

[tutorial]插入[/tutorial]
KE.plugin['page'] = { click : function(id) { KE.util.selection(id); KE.util.insertHtml(id, '[PageNext]'); KE.util.focus(id); } };
至此kindeditor.js文件修改完毕，下面我们来让按钮出现。。。

打开目录下skins文件夹下面的default.css样式表文件

[codee].ke-icon-about {
background-position: 0px -672px;
width: 16px;
height: 16px;
}
.ke-icon-plainpaste {
background-position: 0px -704px;
width: 16px;
height: 16px;
}[/codee]
修改
[codee].ke-icon-page {
background-position: 0px -896px;
width: 16px;
height: 16px;
}
[/codee]
[newauthor title="标题"]这个CSS规则只是调用了一张背景图片然后让它做偏移，图片的位置在skins/default/下，文件名为default.gif这个图片里有很多默认没有用到的按钮，我只是选择了一个，大家可以自由发挥呵呵