美文网首页程序员前端攻城狮
ueditor集成秀米编辑器

ueditor集成秀米编辑器

作者: 范小饭_ | 来源:发表于2018-12-02 11:47 被阅读14次

    最近乙方提出了‘ueditor集成秀米编辑器’这个需求,官方文档寥寥几字,真的高估了普通开发渣的智商,所以搜了一些文档,发现相关文档比较少,并且大多数文档都是根据自己的实际项目配置,或是介绍片面,但是根据点来画线,还是成功在vue2+项目中配置了ueditor集成秀米,用小短手给自己鼓个爪(左三下,右三下,ok)。

    一开始局限于根据官方文档
    在ueditor中作相关操作和配置,发现二次开发需要更改很多配置,并且中间集成秀米的时候还有全局变量的问题,最后在摔键盘之前放弃了。

    俗话说的好,大树底下好乘凉,在github上某个山头的大神做了一个基于vue的ueditor的组件,能够实现双向数据绑定,并且配置和使用都so easy,最后就用了这个组件,并且向大神摩拜,就是 这个组件 vue-ueditor-wrap,根据README.md,可以轻松在vue项目下配置一个ueditor编辑器

    首先下载ueditor文件包,并安装在vue的static文件夹下,

    然后官方下载所需文件并放到ueditor的dialogs目录

    根据 vue-ueditor-wrap的文档配置好ueditor编辑器

    现在你组件的代码,大概长这样


    你配置好的编辑器大概长这样

    那我们现在结合组件的 init 属性和 registerButton 方法,可以方便地添加自定义按钮,来对 window.UE 进行二次开发。init 函数将在 scripts 加载完毕、UEditor 初始化之前运行

    <template>
      <vue-ueditor-wrap ref="editor" v-model="msg" :init="myInit"></vue-ueditor-wrap>
    </template>
    
    <script>
    export default {
      methods: {
        myInit () {
          this.$refs.editor.registerButton({
            name: 'test',
            icon: '/static/xiumi-connect-icon.png',
            tip: 'this is a test tip',
            handler: (editor, name) => {
              // 点击自定义按钮事你需要做的事
            }
          })
        }
      }
    }
    </script>
    

    在编辑器页面中引入一个iframe用来支撑第三方秀米的页面。 <iframe id="xiumi" src="//xiumi.us/studio/v5#/paper" v-show="showIframe"></iframe>

          this.editor = editorInstance
          var xiumi = document.getElementById('xiumi');
          var xiumi_url = 'http://xiumi.us';
          xiumi.onload = function () {
              xiumi.contentWindow.postMessage('ready', xiumi_url);
          };
          document.addEventListener('mousewheel', function (event) {
              event.preventDefault();
              event.stopPropagation();
          });
          window.addEventListener('message', function (event) {
              if (event.origin === xiumi_url) {
                  self.editor.execCommand('insertHtml', event.data);
                  self.$emit('input', self.editor.getContent());
                  self.editor.fireEvent('catchRemoteImage');
    
              }
          }, false);
    

    contentWindow属性,是指iframe所在的window对象,postMessage() 方法可以安全地实现跨源通信,实现页面与嵌套的iframe消息传递。postMessage(data,origin) data为要传递的数据,origin为目标窗口的源。

    当秀米iframe加载完成后。向iframe发送一条消息,iframe的页面也通过window.addEventListener('message',xxx)接收。

    我们需要做和秀米页面一样的逻辑监听message事件,秀米保存时源码里应该在触发保存事件的时候执行了
    window.parent.postMessage(xxx, '*'),这样可以拿到秀米保存时候postMessage的值为event.data。event.origin为发送消息窗口的源。拿到返回值后需要你手动设置到你的编辑器中的源码中。

    现在当我们点击自定义按钮时候,就会弹出秀米


    现在我们就可以在秀米编辑好想要页面然后保存在ueditor中,当然,后续的图片上传肯定还会遇到问题,因为暂时还没有测试,等后续测试发布前,会在更新上线问题,嗯,先酱。

    相关文章

      网友评论

        本文标题:ueditor集成秀米编辑器

        本文链接:https://www.haomeiwen.com/subject/sbqjcqtx.html