UEditor二次开发之新增自定义按钮

需求

现状描述：目前预览正文内容只是文本框放大的样式
UEditor二次开发之新增自定义按钮
优化方向：建议点击预览可直接预览门户界面的样式

也就是现状我们调用的是Ueditor自带的预览功能,而需求中的预览功能则相当于要我们重写预览按钮

在之前老版本的Ueditor中新增按钮很麻烦,具体可以参考这里

二次开发

无需对 UEditor 代码做任何修改，只需在UEditor之外通过UEditor提供的二次开发接口开发定制功能.这种开发方式不仅避免了修改UEditor源码，方便日后UEditor的升级，而且通过接口，可以将开发的定制功能维护到一个文件中或者一个目录中，方便日后对其维护。

1.uiname,是你为新添加的UI起的名字，这里可以是1个或者多个，“uiname”后者是“uiname1 uiname2 uiname3”
2. function，是实际你要做的事情，这里提供两个参数，editor是编辑器实例，如果你有多个编辑器实例，那每个编辑器实例化后，都会调用这个function,并且把editor传进来,uiname,你为ui起的名字，如果前边你添加的是多个的化，这里function会被调用多次，并且将每一个ui名字传递进来.如果函数返回了一个UI 实例，那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何UI。比如希望监控selectionchange事件，在某些场景下弹出浮层，这时就不需要返回任何UI.
3. index,是你想放到toolbar的那个位置，默认是放到最后
4. editorId,当你的页面上有多个编辑器实例时，你想将这个ui扩展到那个编辑器实例上，这里的editorId是给你编辑器初始化时，传入的id,默认是每个实例都会加入你的扩展

对于 UEditor 的二次开发，一般多为添加按钮，下拉筐或者是添加一个dialog。基于这几种常规的方式，我在_examples目录下分别书写了3个类型的定制demo。

addCustomizeButton.js 添加一个按钮
addCustomizeCombox.js 添加一个下拉框
addCustomizeDialog.js 添加一个弹出层

我们根据我们的需求这里说一下添加一个按钮SoEasy~~~ 不得吐槽一下以前是真繁琐之前不知道有新方式用老的弄,在之前的版本中，UEditor对于二次开发的支持不够优化，经常需要开发者不仅要开发相应的功能，例如command命令,plugin插件等，还要在UEditor上修改多处文件，差点没弄吐血
首先我们定义我们自定义按钮
添加一个按钮

UE.registerUI('button', function(editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
            alert('execCommand:' + uiName)
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: '预览',
        //添加额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules: 'background-position: -422px -20px;',
        //点击时执行的命令
        onclick: function() {
            //这里可以不用执行命令,做你自己的操作也可
            if($("input[name='title']").val()==''){
                layer.msg('必需输入标题才能预览！');
                return;
            }
            NewsNotice.saveUeditor();
        }
    });
    //当点到编辑内容上时，按钮要做的状态反射
    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;
});

saveUeditor:function(){
        	$("#hiddenContent").val(UE.getEditor('jsNewsNoticeContent').getContent());

        	var rows = $("#jsAttachmentDg").datagrid('getRows');
        	var temp = '';
        	for(var i=0;i<rows.length;i++){
        		temp += rows[i].fileType+","+rows[i].fileName+";";
			}
			$("#hiddenRowsData").val(temp);
			$("#hiddenRowsCount").val(rows.length);
        	window.open(basePath+'/portal/news/newsNoticeDetail.jhtml');
		},

添加多个按钮

UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
            alert('execCommand:' + uiName)
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: uiName,
        //添加额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules: 'background-position: -500px 0;',
        //点击时执行的命令
        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;
});

最后只需要在我们的页面中引入我们新增按钮所在的js即可是不是很easy

<script type="text/javascript" charset="utf-8" src="/assets/js/modules/form/form_preview_notice.js?v=${assets_v}"></script>

哈哈哈嗝大功告成!!!
最后再说一句真是用过老方式才知道新的添加按钮接口有多爽欧耶

UEditor二次开发之新增自定义按钮

需求

二次开发

相关推荐