客户说工具栏太复杂了,但是有时候又能用到,所以给了个需求,做一个按钮能实现显示或隐藏按钮
好吧,客户是上帝,开搞
思路:ckeditor添加一个自定义按钮,里面方法实现display:none样式隐藏,这样就可以不用再次加载ckeditor啦
1.首先
ckeditor添加自定义按钮要将文件放在这个ckeditor里的plugins这个文件夹里
先创建一个这样的结构
icons是存放按钮图标的地方,待会用到,plugin.js就是接下来主攻的内容了
/**帅气的刘xx 2021.3.10*/
(function () {CKEDITOR.plugins.add('swap', {icons: 'swap',init: function (editor) {// 创建指令editor.addCommand('swap',CKEDITOR.plugins.swapButton.commands.swapButton);// 插件按钮editor.ui.addButton('swap', {label: '切换按钮',command: 'swap',icon: this.path + 'icons/swap.png',toolbar: 'document'});}});var swap = true;CKEDITOR.plugins.swapButton = {commands: {swapButton: {exec: function (editor) {testFunction(editor);}}}};
//demo演示,根据实际修改function testFunction(editor){if(swap){var toolbars = editor.toolbox.toolbars;console.log(toolbars);var testId = toolbars[1].id;document.getElementById(testId).style.display = "none";swap = false;}else{var toolbars = editor.toolbox.toolbars;console.log(toolbars);var testId = toolbars[1].id;document.getElementById(testId).style.display = "inline-block";swap = true;} }})();