前几天UEditor后台上传文件功能错误了，总结下给各位道友提个醒。
显示报错：~~后端配置项没有正常加载，上传插件不能正常使用！~~

图片的能上传也找不到路径，在这里转圈圈。

根据官网和各位网友的总结：
首先尝试controller.jsp 是否能传过来文件：
UEditor的存放位置如下：

访问controller.jsp是否能正常传回数值

http://localhost:8080/book/utf8-jsp/jsp/controller.jsp

出现类似下图所示内容，则配置成功，否则，即为失败。

**若出错，请检查ueditor.config.js、config.json和controller.jsp

ueditor.config.js 要配置URL路径

config.json要设置imageUrlPrefix 路径

其中controller.jsp代码如下**

<%

    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
    out.write( new ActionEnter( request, rootPath ).exec() );
%>

大家可参考官网给出的教程：http://fex.baidu.com/ueditor/#server-jsp

Uedtior编辑器图片上传功能不能使用

这是SSM整合ueditor中最经常遇到的问题，主要原因是springmvc在处理静态资源时错将/ueditor/jsp/下的controller.jsp文件当作静态资源处理了，从而导致文件上传组件不能正常使用。
这里有两种解决方案：
第一种是在配置静态资源时放过controller.jsp文件，该方法自行百度即可，很简单。
第二种修改config.json文件。找到/ueditor/jsp/下的config.json文件，打开在第11行，配置imageUrlPrefix属性值为你的服务器地址，例如我的服务器地址时http://locallhost:8080/,那么该属性配置如下："imageUrlPrefix": "http://localhost:8080/",

下面我们解释下为什么要这么配置：在上边我们说了图片功能不能使用的主要原因时jsp文件被当作静态文件处理而导致的，但是在普通的web项目中就没有这个问题。这是因为在web.xml中我们引入springmvc时配置了这样的一段代码：

<servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

从而导致了我们的请求走springmvc框架，注意我们配置了过滤器，但是我们的编译器中并不在这个范围内，所以我们的请求不能被处理。最简单的办法就是强制性走springmvc框架，也就是我们上面配置的那句话。

 上传图片可能会出现报错，如下

解决这个问题可以将php文件下config.json的内容复制到ueditor.config.js中（具体文件在分割线下方的整体流程中）

 解决后应该得到的页面如下

试题题库、考试等项目多会用到富文本编辑器，当时对比了好多，最后看上了UEditor集成复杂公式的功能，于是莫名自信的搞了起来。公式集成没有坑，大坑在上传图片上。

UEditor资源下载链接

下面就是 基本的引入、使用、以及上传文件报错的解决方法

一、引入

1、安装组件

npm install vue-ueditor-wrap

 2、下载UEditor，官网UEditor文档，下载地址是https://github.com/fex-team/ueditor

这里有疑问： 为什么已经用npm安装了，还需要下载UEditor呢？？？

答：UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，看最初官网提供的版本就知道了

 需要下载的内容：现在下载地址中的ueditoe.config.js的配置不完整，可能会导致上传图片、视频等出现【后台配置不正确】的问题。所以自己原来下载的安装包挂在了这个地址https://gitee.com/wxyer/ueditor

 3、下载完成后将整个文件夹放到项目的public文件夹下，目录结构如下：

4、配置编辑器路径

 5、静态文件还需要再public/index.html中进行引入

    <!-- 引入UEditor -->
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script>

6、将ueditor挂载到全局下，在main.js中引入

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap', VueUeditorWrap)

二、使用

1、使用、配置自定义工具栏

进行到这里，我们页面就基本可以使用富文本编辑器了，其中我们可以自定义config展示我们需要的工具，具体配置可以参考ueditor.config.js文件中的内容

<vue-ueditor-wrap
    v-model="dataForm.analysis"
    :destroy="false"
    :config="config"
/>

2、 集成第三方公式插件，插件kityformula-plugin

在index.html中引入公式文件，在config.js中的toolbars数组下添加‘kityformula’

 至此，集成公式就可以了。大坑在下面上传文件

 3、上传文件

现在上传图片可能会出现报错，如下

解决这个问题可以将php文件下config.json的内容复制到ueditor.config.js中

 解决后应该得到的页面如下

4、后端交互

接着来就是和后端的交互了。在php/config.json的文件中有每个属性的注释，可以对照修改。后端也需要引入UEditor的包，具体包需要后端根据项目技术下载。

 至此完。综合全网问题大多会卡在文件上传部分