ueditor 简单/复杂工具栏切换

最新推荐文章于 2023-08-30 10:08:14 发布

落叶3213

最新推荐文章于 2023-08-30 10:08:14 发布

阅读量2.6k

点赞数 1

分类专栏：网页编辑器文章标签： ueditor

本文链接：https://blog.csdn.net/luoyehome/article/details/51778180

版权

网页编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现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>
效果：第一个按钮切换简单/复杂工具栏
复杂工具栏