CKEditor4添加自定义按钮 创建自定义插件

这里会提到两种添加自定义按钮的方式，都是基于创建插件添加的。

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是具体代码