在vue中使用ueditor（上传图片）

下载ueditor源码

下载地址：http://ueditor.baidu.com/website/download.html，这里使用的是jsp utf-8版本，下载完以后解压，把文件夹名字改为UEditor。如果是vue-cli2构建的项目，把UEditor文件夹放在static文件夹下，如果是vue-cli3构建的项目就放在public文件夹下。

安装vue-ueditor-wrap

vue-ueditor-wrap插件可以让ueditor使用v-model实现数据双向绑定。

npm i vue-ueditor-wrap

使用vue-ueditor-wrap

// 在要使用ueditor编辑器页面引用组件

import VueUeditorWrap from 'vue-ueditor-wrap'

// 注册组件

components: { VueUeditorWrap }

// 使用组件

<vue-ueditor-wrap v-model="content"></vue-ueditor-wrap>

配置

此处需要后台配合提供配置文件的请求接口，并且后台提供的配置文件也需要修改，修改的内容与前端相似

在要使用ueditor的vue文件中

// html:
<vue-ueditor-wrap v-model="content" :config=”myConfig” @ready=”ueditorReady”></vue-ueditor-wrap>
// js:
data () {
  return {
    myConfig: {
      toolbars: [], // 菜单
      serverUrl: 'xxx', // 请求配置文件的接口
      UEDITOR_HOME_URL: ‘/UEditor/’ // UEditor资源存放路径，最好根据环境来判断路径
      …… // 同ueditor官网介绍的配置
    }
  }
},
methods: {
  // 此方法用来处理上传图片 
  ueditorReady: function (editorInstance) {
    let UE = editorInstance;
    UE._bkGetActionUrl = UE.getActionUrl;
    UE.getActionUrl = function(action) {
      if (action === 'uploadUeFile'){
        // 替换原有的上传路径,包括图片上传视频上传等
        return '/xxx/uploadUeFile'; // 上传接口路径
      } else if (action === 'config') {
		// 获取config配置文件
        return 'xxx'; //获取配置文件接口路径
      } else {
        return this._bkGetActionUrl.call(this,action);
      }
    }
  }
}

在ueditor.config.js中

在vue-cli2中可以使用env的值来判断环境，但是在vue-cli3中的public文件夹下的js文件是获取不到env值的，只能用其他方式来判断环境。

let locationHost = window.location.host;
if (locationHost.indexOf('测试环境域名关键字') > -1) { // 测试环境
  window.UEDITOR_HOME_URL = "http://域名/项目名/UEditor/";
} else if (locationHost.indexOf('线上环境域名关键字') > -1) { // 线上环境
  window.UEDITOR_HOME_URL = " http://域名/项目名/UEditor/";
} else { // 开发环境
  window.UEDITOR_HOME_URL = "/public/UEditor/";
}
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

window.UEDITOR_CONFIG = {

  //为编辑器实例添加一个路径，这个不能被注释
  UEDITOR_HOME_URL: URL

  // 服务器统一请求接口路径
  , serverUrl: "xxx" // 获取配置文件接口路径

  ……
}