vue2+ueditor集成秀米编辑器

本文主要是介绍vue2+ueditor集成秀米编辑器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、百度富文本编辑器

1.首先下载 百度富文本编辑器

   下载地址：GitHub - fex-team/ueditor: rich text 富文本编辑器

2.把下载好的文件整理好  放在图片目录下

3. 安装插件vue-ueditor-wrap

npm install vue-ueditor-wrap

4.在你所需要展示的页面 引入vue-ueditor-wrap

此时 ，你的页面就能展示出来编辑器了

二、集成秀米编辑器

1.你可以参考官方文档秀米图文排版UEditor插件示例，也可以参考我下面的操作

2.首先 在官方文档下载以下4个文件

            

3.把他们按照下图 丢进你的项目里

4.在main.js中引入基本文件（第一次npm run start时，编辑ueditor.all.js可能会比较慢，等待一会就好了）

注意：1.xiumi-ue-dialog-v5一定要放在ueditor.all.js后面，不然可能会出现报错

          2.下载的图标样式最好放在本地（图二），我的项目就遇到直接请求背景图地址https://dl.xiumi.us/connect/ue/xiumi-connect-icon.png（图一） 编辑器并不能展示图标的情况

        3. 在ueditor.config.js文件中 找到toolbars属性，添加dialog字段，否则编辑器也是不会展示图标的

5.此时你的编辑器就能出现秀米的图标啦

6.改写xiumi-ue-dialog-v5.js中的iframeUrl

iframeUrl: editor.ui.UEDITOR_HOME_URL + 'dialogs/xiumi-ue-dialog-v5.html',

此时点击图标，就能打开秀米编辑器了

这篇关于vue2+ueditor集成秀米编辑器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---