欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在vue中使用ueditor(上传图片)

程序员文章站 2022-05-26 17:55:03
...

下载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" // 获取配置文件接口路径

  ……
}