2021-05-11

ckeditor4 添加自定义插件:

1 首先在ckeditor/plugin文件下创建自己的插件(目录结构)：

配置富文本工具栏自定义按钮

在config.js中添加extraPlugins

config.extraPlugins = 'linkbutton';

在toolbar中添加{ name: 'linkbutton', items: [ 'linkbutton' ] }  自定义按钮(按钮位置根据按钮在toolbar中的位置) 

显示ckeditor组件的对话框

2  （plugin.js） 自定义插件： 

dialogs/(插件.js)    下面是的模态框内容配置

如果想利用自定义按钮展示自己的对话框:

将editor.addCommand抽离到vue组件当中即可

  vueObj.editor.addCommand('linkbutton', {

        exec: function(ev) { 

           // 结合自定义按钮做相关的操作

        }

      });

 

友情提示:  如果想将一段代码插入富文本可直接调用  editor.insertHtml( 'Insert a piece of code' );