ueditor 简单/复杂工具栏切换

实现Ueditor 工具栏 简单/复杂工具栏切换

1.把下面的代码保存为addtoggletool.js

var toolbarstate=0;
UE.registerUI('mybtn',function(editor,uiName){
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName,{
execCommand:function(){
var getEditorId=editor.key;
console.log(editor.key);//获取引入编辑器时UE.getEditor("myeditor")中的myeditor
this.destroy();
if(toolbarstate==0){
//alert(this.destroy());
UE.getEditor(getEditorId,{toolbars:[[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts'
]]});
toolbarstate=1;
}else{
//this.destroy();
//alert("1");
UE.getEditor(getEditorId,{toolbars:[[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|',
'simpleupload', 'insertimage','|', 'selectall', 'cleardoc'
]],initialFrameWidth:1024,initialFrameHeight:500});
toolbarstate=0;
}

}
});

//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name:uiName,
//提示
title:'简单/复杂工具栏',
//需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules :'background-position: -400px -40px;',
//点击时执行的命令
onclick:function () {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});

//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});

//因为你是添加button,所以需要返回这个button
return btn;
}, [1]/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

2.然后在网页代码里引用<script type="text/javascript" charset="utf-8" src="addtoggletool.js"></script>

效果：第一个按钮切换简单/复杂工具栏
复杂工具栏



简单工具栏