首页 > 代码库 > CKEditor 添加自定义按钮
CKEditor 添加自定义按钮
1、下载ckeditor,我这里下载的是CKEditor 3.6.2。
2、里边有压缩过的代码及源码，源码所在目录为_source，还有一些使用例子，具体不做累述
此处主要讲的是在使用过程需要添加自定义按钮。
2. 比如我要添加“插入代码”的按钮，起名为code。在ckeditor/plugins下新建文件夹code，在code文件夹里加入一个小图片如code.gif，然后在code文件夹里新建plugin.js文件，内容如下：
//一键排版
(function () {
b = ‘format_wz‘;
CKEDITOR.plugins.add(b, {
requires: [‘styles‘, ‘button‘],
init: function (a) {
a.addCommand(b, CKEDITOR.plugins.autoformat.commands.autoformat);
a.ui.addButton(‘format_wz‘, {
label: "一键排版",
command: ‘format_wz‘,
icon: this.path + "format_wz.png"
});
}
});
CKEDITOR.plugins.autoformat = {
commands: {
autoformat: {
exec: function (editor) {
formatText(editor);
}
}
}
}；
//执行的方法
function formatText(editor) {
var myeditor = editor;
//得到要编辑的源代码
var editorhtml = myeditor.getData();
//在这里执行你的操作。。。。。
editorhtml= editorhtml.replace(/(<\/?(?!br|p|img|a|h1|h2|h3|h4|h5|h6)[^>\/]*)\/?>/gi,‘‘);
//在p标签处添加样式，使每个段落自动缩进两个字符
editorhtml= editorhtml.replace(/\<[p|P]>/g,"<p style=‘text-indent: 2em‘>");
//再将内容放回到编辑器中
editor.setData(html);
}
})();
3. 修改config.js来注册code插件。用如下代码替换config.js原来内容：
CKEDITOR.editorConfig = function( config ) {
//配置CKFinder
config.extraPlugins = "code,uploadImg";
//新建插件 config.toolbar_temp = [
{ name: ‘document‘, items: [‘code‘,‘format_wz‘, ‘Save‘] },
{ name: ‘styles‘, items: [‘Styles‘, ‘Format‘, ‘Font‘, ‘FontSize‘] } ];
config.toolbar_Full = [
{ name: ‘document‘, items: [‘code‘, ‘Source‘,‘-‘,‘format_wz‘,‘-‘, ‘Save‘, ‘NewPage‘, ‘DocProps‘, ‘Preview‘, ‘Print‘, ‘-‘, ‘Templates‘] },
{ name: ‘tools‘, items: [‘Maximize‘, ‘ShowBlocks‘, ‘-‘, ‘About‘] } ];
};
注意我的CKEditor配置都是通过修改config.js来完成
4. 安装CKEditor，在要引入CKEditor的页面中script标签内添加如下js代码：
var editor=CKEDITOR.replace(‘p_Content_content‘,{
fullPage: true,
extraPlugins: ‘uploadImg,format_wz,docprops‘
});
CKFinder.setupCKEditor(editor, ‘ckfinder‘);
5.刷新页面，就能看到自己后添加的按钮了。