此文旨在前后端分离的前提下，配置ueditor联通前后端接口，实现ueditor的文件上传（一般是图片上传）并在编辑器中反显

目录结构

百度的ueditor组件提供了各种主流的后端语言（Java，Asp，Php，Net。当然，没有node是一个遗憾）资源包，目录结构如下图

给前后端分离工作提供了很好的铺垫，这里不得不赞叹我们的百度工程师！

前端使用vue-cli，内置了webpack服务，后端使用java

前端目录结构是这样

配置静态资源

配置

首先配置ueditor的静态资源地址，配置成功后，css样式、语言包、各子组件等文件将会由组件自行加载

找到ueditor.config.js文件的URL字段，配置为

var URL = '/static/ueditor/'

• 1

即可

引入

由于ueditor不具备前端模块化的前提，因此当成静态资源引入是一个更好的选择

<script src="/static/ueditor/ueditor.config.js"></script>

<script src="/static/ueditor/ueditor.all.js"></script>

• 1
• 2

这种写法在webpack环境下显得不是太优雅，因为这相当于在全局中引入了两个js文件，有悖与webpack按需加载的理念

当然，也可以将ueditor.config.js和ueditor.all.js两个文件放在assets里，然后前端使用模块的方式引入js文件

import '@/assets/plugins/ueditor/ueditor.config.js'

import '@/assets/plugins/ueditor/ueditor.all.js'

• 1
• 2

需要注意的是，把静态资源放在static文件夹下是webpack的规范，引用采用/static形式，这是绝对路径的写法。这种写法还有一个好处，不知道你有没有发现，上面配置URL也是使用’/static/ueditor/’的绝对路径的形式，这样写不管你是用之前那种方法引入两个js文件config都能找到ueditor的静态资源

还有一点需要特别注意，使用import引入资源时是不能引用/static文件夹下文件的

import '/static/ueditor/ueditor.config.js'

import '/static/ueditor/ueditor.all.js'

• 1
• 2

以上写法无效！

贴一段vue文件引入ueditor的代码

<template>

<div ref="editor"></div>

</template>

<script src="/static/ueditor/ueditor.config.js"></script>

<script src="/static/ueditor/ueditor.all.js"></script>

<script>

/* eslint-disable */

// import '@/assets/plugins/ueditor/ueditor.config'

// import '@/assets/plugins/ueditor/ueditor.all'

export default {

...

}

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

了解更多webpack规范请移步官方网站 http://webpack.github.io/

连接后台服务

后台接口

到目前为止，前端ueditor静态资源已配置完毕，接下来配置后台文件上传接口。

打开ueditor.config.js文件，找到如图所示的serverUrl字段。这里我配置的是

serverUrl: window.location.origin + '/api/ueditor/jsp/controller.jsp'

• 1

这里需要说明一下，前后端分离在前端需要在根目录config文件夹下的index文件配置后台服务代理地址以映射后台服务，我是将前端的/api目录映射后台服务的根目录。如图所示，在dev项配置proxyTable，使用/api目录映射后台服务接口

因此在配置serverUrl的时候window.location.origin + ‘/api’即找到后台接口，’ueditor/jsp/controller.jsp’映射ueditor服务路径

（由于是从前端视角分析ueditor配置，这里不会详细说明java中contoller是怎么实现的，其它诸如php，net，asp大同小异）

地址前缀

到目前为止，整个前端配置工作已全部完成，打开组件试着上传一张图片，观察network，是能够获取后台响应的，但是有个问题，图片上传成功后并没有在编辑框中反显，仅仅显示出图片的名字，对！还有一个配置项

打开后台部分的jsp/config.json文件，找到imageUrlPrefix字段，这个是图片访问路径前缀。

由于后台返回的图片地址是一个相对地址，如果不配置的话会从前端当前目录下开始计算图片的绝对路径，可以想象，图片上传成功后返回的是该图片在后台的相对地址，再配合前端页面的地址得到的绝对路径必然是有问题的

解决方案是，配置imageUrlPrefix字段。假设后台的地址是localhost:8080

"imageUrlPrefix": "http://localhost:8080/root", /* 图片访问路径前缀 */

• 1

后台根路径是root，这样配置后前端在上传图片反显的时候会用这个前缀加上图片相对地址来获取图片的绝对地址，实现图片的显示

当然，你也可以将这个地址配置为前端路径，使用前面提及的代理模式去访问图片地址。假设前端地址是localhost:8081

"imageUrlPrefix": "http://localhost:8081/api", /* 图片访问路径前缀 */

• 1

这里需要强调的是，在配置时一定记得加上协议头”http://” 或 “https://”, 不然连上传图片的时候连前端请求都找不到！ 亲测~~~

发一张配置成功上传图片并反显的效果图

致敬偶像登哥！（图片侵删）

技术处女贴，欢迎批评指正多多交流！