ckeditor动态显示隐藏工具栏指定的按钮

客户说工具栏太复杂了，但是有时候又能用到，所以给了个需求，做一个按钮能实现显示或隐藏按钮

好吧，客户是上帝，开搞

思路：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;
		 }	 
	 }
	
})();