客户说工具栏太复杂了,但是有时候又能用到,所以给了个需求,做一个按钮能实现显示或隐藏按钮
好吧,客户是上帝,开搞
思路: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;
}
}
})();