这里会提到两种添加自定义按钮的方式,都是基于创建插件添加的。
1.创建基本插件
关于创建基本插件官方有一个小案例,大家可以去看一看:用 20 行代码创建 CKEditor 4 插件
CKEDITOR.plugins.add('horizontaldashed', {
icons: 'horizontaldashed', // 图标
init: function (editor) {
editor.addCommand('horizontaldashed', { // 创建插件,插件的名称会在启用插件的时候使用
exec: function (editor) {
// 点击按钮后悔触发回调
editor.insertHtml('<hr style="border: 1px dashed" />'); // 向富文本中添加的文本
}
});
editor.ui.addButton('HorizontalDashed', { // 添加按钮,按钮的名称会在添加按钮的时候使用
label: '插入水平虚线', // 鼠标悬浮在按钮上时显示的文字
command: 'horizontaldashed', // 这里写插件的名称
toolbar: 'insert' // 按钮的位置,也可以在启用的时候设置位置
});
}
});
大概效果如下:
2.下拉菜单形式的插件
CKEDITOR.plugins.add('templecustomize', {
icons: 'templecustomize', // 图标
init: function (editor) {
editor.ui.addRichCombo('TempleCustomize', { // 按钮名称,启用按钮时的名称
label: '模版', // 下拉菜单的名称
title: '模版',
toolbar: 'insert',
panel: {
css: ['/ckeditor/plugins/templecustomize/css/index.css'], // 插件的样式
multiSelect: false,
attributes: { 'aria-label': '模版' }
},
init: function () {
// 点击插件按钮时会触发回调
this.startGroup('选择模板'); // 下拉分组
this.add('value', 'label') // 下拉的选项
},
onClick: function (value) {
// 点击下拉选项时会触发回调
editor.insertHtml(value)
}
})
}
});
效果如下:
这里需要注意的是,无论哪种插件,插件的名称和图标的名称是要和文件夹名称保持一致的,另外文件夹内的结构也是固定的,自定义插件要放在public\ckeditor\plugins\路径下,icons中是要显示的图标,plugin.js是具体代码