秀米图文排版UEditor插件示例 新增自定义按钮没有显示 以及与neditor的适配

这是秀米插件的官方文档示例链接

因为业务需求，我们后端的CMS里的富文本编辑器需要使用秀米插件，因为我们使用的是vue，便使用了neditor（这是用vue对ueditor的一个封装）。

我们先来解释下秀米插件的原理，它其实是在ueditor上新增了一个自定义按钮，大家通过这个按钮就会呼出一个iframe，这个iframe里就是秀米自己的编辑器，在秀米自己的编辑器里编辑完之后，点击√，可以触发事件，将秀米自己的编辑器里的内容传到parent（就是我们的页面）的富文本里。

所以，目标2步走
1、新增秀米插件的按钮，显示在我们的富文本编辑器上
2、点击该按钮，可以呼出一个iframe，这个iframe引用的是秀米自己的编辑器页面

秀米这边让我们引入了4个文件
分别是1、这是前面两个

其实这两个文件的代码很简单

这是xiumi-ue-v5.css里的代码，就这几行，实际上就是给我们新增按钮的样式定义而已，所以从哪里引入无所谓，只要引进去就行

.edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {
    background-image: url("https://dl.xiumi.us/connect/ue/xiumi-connect-icon.png") !important;
    background-size: contain;
}

这是xiumi-ue-dialog-v5.js文件的代码

/**
 * Created by shunchen_yang on 16/10/25.
 */
UE.registerUI('dialog', function (editor, uiName) {
    var btn = new UE.ui.Button({
        name   : 'xiumi-connect',
        title  : '秀米',
        onclick: function () {
            var dialog = new UE.ui.Dialog({
                iframeUrl: 'xiumi-ue-dialog-v5.html',
                editor   : editor,
                name     : 'xiumi-connect',
                title    : "秀米图文消息助手",
                cssRules : "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",
            });
            dialog.render();
            dialog.open();
        }
    });

    return btn;
});

emmm，我们可以看到是16年的代码，也是有点古老的，哈哈扯远了。
这个代码我们可以看出来，是往UE里注册了一个按钮，然后给这个按钮绑定了一个点击事件，点击之后就能跳出一个UE.ui的对话框，这个对话框要引入一个iframeUrl，这个链接的位置跟另外两个文件的位置有关。

2、这是后面引入的两个文件

这两个文件一个是iframe要引入的页面，一个是iframe里的js
这两个文件的位置就有点讲究了，xiumi-ue-dialog-v5.html这个位置，文档上需要跟ueditor的文件放在一起，因为我的项目是vue-cli3的，所以放在public下的Neditor的文件夹里

因为我这个是neditor的封装，所以不能像一般引用过xiumi-ue-dialog-v5.js，我们需要的只是xiumi-ue-dialog-v5.js里的代码。我们需要把这段代码插入到vue初始化neditor之前

因为public文件夹在打包之后是会在根目录下面的，所以iframe的路径就为 /文件夹路径/xiumi-ue-dialog-v5.html。
上述配置可能会遇到各种控制台报错，一般是找不到UE对象啊什么的，对象为null什么的，这些就要注意下引入的位置，调用的位置，以及注册是否正确了。

但是！但是！这一番配置之后！我们的富文本编辑器上还是没有出现秀米插件的按钮。

我们还需要在
加上我们自定义的UI的名称，我们这边自定义为dialog，我们就在toolbars加上
toolbars在自定义配置里面，加上就行了，这样按钮就会出现了。