最近乙方提出了‘ueditor集成秀米编辑器’这个需求,官方文档寥寥几字,真的高估了普通开发渣的智商,所以搜了一些文档,发现相关文档比较少,并且大多数文档都是根据自己的实际项目配置,或是介绍片面,但是根据点来画线,还是成功在vue2+项目中配置了ueditor集成秀米,用小短手给自己鼓个爪(左三下,右三下,ok)。
一开始局限于根据官方文档
在ueditor中作相关操作和配置,发现二次开发需要更改很多配置,并且中间集成秀米的时候还有全局变量的问题,最后在摔键盘之前放弃了。
俗话说的好,大树底下好乘凉,在github上某个山头的大神做了一个基于vue的ueditor的组件,能够实现双向数据绑定,并且配置和使用都so easy,最后就用了这个组件,并且向大神摩拜,就是 这个组件 vue-ueditor-wrap,根据README.md,可以轻松在vue项目下配置一个ueditor编辑器
首先下载ueditor文件包,并安装在vue的static文件夹下,
根据 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中,当然,后续的图片上传肯定还会遇到问题,因为暂时还没有测试,等后续测试发布前,会在更新上线问题,嗯,先酱。
网友评论