VUE+百度富文本编辑器

在我们开发过程中或多或少会遇到需要富文本的功能，富文本编辑器其实也很多，但是我们常用的就是那么几个，比如百度UEditor富文本编辑器，这个使用起来也方便，功能也很完善。但是总有那么一点吊胃口，百度富文本编辑器官网也不再做更新了，在vue项目中使用的话很难配置，开发过程中遇到的问题！

前期准备工作下载好UEditor

后续提供下载UEditor下载地址UEditor下载

下载好的UEditor文件放置在位置

vue-cli3版本放在public目录下，vue-cli2版本放在静态static目录下
以vue-cli2为例

其次安装vue-ueditor-wrap

npm install vue-ueditor-wrap 或者cnpm install vue-ueditor-wrap

Vue中使用步骤实现

vue文件中html部分代码

 <vue-ueditor-wrap v-model="remark" :config="myConfig"></vue-ueditor-wrap>

vue文件中Js代码部分

 const VueUeditorWrap = window.VueUeditorWrap;// 全局变量，通过 script 标签引入
    export default {
  data(){
         return {
          remark:'我是渲染字段',
          myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 400,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
            serverUrl: '文件上传的接口地址，自己去实现',
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            UEDITOR_HOME_URL: '/static/UEditor/'
          },
}
}
}