在Vue项目中使用Ueditor总结

基本使用

1.下载资源包

因为ueditor在npm上暂无官方依赖包，因此需要先到官网下载文件包，我下载的是jsp版本的

2.引入依赖文件

将下载后的文件夹命名为UE，并放入到项目static文件夹中，然后再main.js引入依赖文件（我这里是全局引入，也可以再使用的组件中引入）；

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min'

3.初始化ueditor

我这里是单独将ueditor抽成一个组件，因此初始化时的id和配置都是从父组件传入的。定义组件：

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data () {
    return {
      editor: null
    }
  },
  props: {
    config: {
      type: Object
    },
    id: {
      type: String
    },
    content: {
      type: String
    }
  },
  mounted () {
    this._initEditor()
  },
  methods: {
    _initEditor () { // 初始化
      this.editor = UE.getEditor(this.id,this.config)
    },
    getUEContent () { // 获取含标签内容方法
      return this.editor.getContent()
    }
  },
  destroyed () {
    this.editor.destroy()
  }
</script>

4.使用组件：

(1).通过import引入定义好的组件；
import UE from '@/components/ueditor/ueditor.vue'
(2).在对应的位置使用组件

<el-form-item label="文章内容" prop="articleContent">
  <UE :id=id :config=config  ref="ue"></UE>
</el-form-item>

(3).在父组件的data中定义初始化配置

// 初始化Ueditor配置参数
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300
      },
      id: 'container',// 不同编辑器必须不同的id

(4).在父组件中获取编辑器内容

// 获取富文本内容
    getEdiotrContent () {
      let content = this.$refs.ue.getUEContent() // 调用子组件方法
      this.articleData.articleContent = content
    }

使用配置

如果需要使用到图片上传功能就需要进行在资源文件ueditor.config.js中正确配置资源路径和图片上传路径
资源加载路径：window.UEDITOR_HOME_URL = "/static/UE/";
文件上传路径：serverUrl: 后台接口地址

跳坑心得

1.开发环境正常使用，但生产环境样式文件未加载，编辑器无法正常显示，图片上传功能无法使用

（1）样式文件未加载
在开发环境我配置的资源路径是：window.UEDITOR_HOME_URL = "/static/UE/";
但当我发布到生产环境时样式完全乱了。
—— 这是因为我代码不是直接放在服务器根目录，而是下级文件夹中，因此资源文件无法正确加载，因为需要开发环境和生产环境配置不同的window.UEDITOR_HOME_URL，当然如果代码放在根目录，此处无需修改
（2）图片上传无法使用
—— 这是因为的在开发环境上传路径做了代理，而static文件不会被打包压缩，在生产环境请求路径就不对。
以上两个问题，我做了如下配置：

  var serverApi = '';
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "productionTest") { // 生产/测试环境
    window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/";
    serverApi = "/newconsole/static/UE/config/getConfig"
  }else { // 开发环境
    window.UEDITOR_HOME_URL = "/static/UE/";
    serverApi = "/api/static/UE/config/getConfig"
  }

  var URL = window.UEDITOR_HOME_URL || getUEBasePath();
     /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL,
        // 服务器统一请求接口路径
        serverUrl: serverApi
      }

这样就可以很好的兼任开发环境和生产环境。

2.编辑器内容过多时，会将编辑器撑开拉长，体验不好

这个问题处理就比较简单了，只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可，这样如果内容过多时就会出现滚动条，而不会撑开编辑器。

好了，以上就是此次使用Ueditor的一点个人总结，希望能给遇到同样问题的小伙伴一点点帮助。