vue使用vue-ueditor-wrap集成秀米@TOC 接入Ueditor UEditor是由百度web前端研发部开

@TOC

接入Ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码：

UEditor官网地址

下载代码放置到vue项目的静态资源目录(assets/public取决于你的vue-cli版本)
下载代码中的后台代码可进行删除

vue-ueditor-wrap

使用vue-ueditor-wrap，vue-ueditor-wrap是一个“包装”了 UEditor 的 Vue 组件,使用它可以快速集成

vue-ueditor-wrap文档地址
安装npm i vue-ueditor-wrap或者yarn add vue-ueditor-wrap

注册组件

// 在main.js中全局注册
import VueUeditorWrap from 'vue-ueditor-wrap'; 
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

组件内使用

<template>
	<VueUeditorWrap v-model="ueContent" :config="myConfig" />
</template>

//ueditor配置
myConfig: {
    // 编辑器不自动被内容撑高
    autoHeightEnabled: true,
    // 初始容器高度
    initialFrameHeight: 600,
    // 初始容器宽度
    initialFrameWidth: "100%",
    // UEditor 资源文件的存放路径，
    UEDITOR_HOME_URL:
      process.env.NODE_ENV == "production" ? "/UEditor/" : "/UEditor/",
    imagePopup: false,
    imageScaleEnabled: false,
    elementPathEnabled: false,
    autoFloatEnabled: false,
    allowDivTransToP: false,
    zIndex: 1,
    // 允许的最大字符数
    maximumWords: 100000,
    serverUrl: process.env.VUE_APP_BASE_API + "/common/upload2",//服务器上传地址
  },

到这一步UEditor已经可以显示出来了

接入秀米

秀米接入地址

下载秀米的4个资源文件（xiumi-ue-dialog-v5.js，xiumi-ue-v5.css，xiumi-ue-dialog-v5.html， internal.js）
将资源文件都放入到你的UEditor目录下，

在main.js中引入UEditor的js文件

import '../public/UEditor/ueditor.config.js'
import '../public/UEditor/ueditor.all.min.js'
import '../public/UEditor/lang/zh-cn/zh-cn.js'
import '../public/UEditor/ueditor.parse.min.js'

将xiumi-ue-v5.css和xiumi-ue-dialog-v5.js引入到你的index.html中

<link rel="stylesheet" href="/UEditor/xiumi-ue-v5.css">

<script type="text/javascript" charset="utf-8" src="/UEditor/xiumi-ue-dialog-v5.js"></script>

修改 xiumi-ue-dialog-v5.js 文件中的路径，修改为你的项目存放路径
```
iframeUrl: '/UEditor/xiumi-ue-dialog-v5.html'，
```
修改xiumi-ue-dialog-v5.html中的internal.js路径，修改为下载的秀米internal.js文件路径
修改ueditor.config.js文件，放置秀米的样式失效
```
	section:['class'， 'style'],
```
此时UEditor应该有了秀米的图标按钮
开启设置图片转存，在ueditor.config.js中
```
catchRemoteImageEnable: true
```