springBoot 整合UEditor百度富文本编辑器。

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。可以定制很多如新闻页面，博客等等。UEditor使用简单，支持二次开发，适合快速开发很多业务功能，研究几天发个学习文档。

    UEditor分为前端和后端前端主要是编辑器部分的渲染功能，后端主要是上传文件，图片等功能。

一，下载地址

•  官网下载地址：https://github.com/fex-team/ueditor；

•  官方文档地址：http://fex.baidu.com/ueditor/；

• 下载的源码里面是没有ueditor.all.js，需要使用node.js命令初始化出dist文件里面有所有需要引入到项目的静态资源文件。创建ueditor目录，目录如下：

• 

  ueditor.json为后台上传功能配置。ueditor.config.js为前端UI控制配置。lang包下有中英文js，其它文件为编辑器的前端UI配置，如需自定义样式可对应找到文件修改。

嫌麻烦不想搞node.js的可以看下载这个：https://pan.baidu.com/s/12LfTRLSMQ5jEHu64lDX5nA     提取码：wwp3  

二，前端，后端使用

• pom.xml引用

•         <!-- ueditorConfig -->
          <dependency>
              <groupId>com.gitee.qdbp.thirdparty</groupId>
              <artifactId>ueditor</artifactId>
              <version>1.4.3.3</version>
          </dependency>
          <dependency>
              <groupId>org.json</groupId>
              <artifactId>json</artifactId>
              <version>20200518</version>
          </dependency>
          <dependency>
              <groupId>commons-fileupload</groupId>
              <artifactId>commons-fileupload</artifactId>
              <version>1.4</version>
          </dependency>
          <dependency>
              <groupId>commons-codec</groupId>
              <artifactId>commons-codec</artifactId>
              <version>1.9</version>
          </dependency>

   

• 页面中引入 ueditor.config.js， ueditor.all.js， zh-cn.js 即可。详细的基础配置官方文档上都有写很简单，这里不再重复写了。
• ueditor.config.js的配置问题。
• config配置比较重要，配置文件注释是中文写的比较清楚，根据自己的业务需求配置对应的功能，这里着重说明下关于请求后台的配置。

• 

  打开ueditor.config.js文件（原来是没有server_url的 这是我自定义了一个项目访问路径，然后把服务器同一请求路径改成自己的服务器请求路径）这样做是为了访问后台加载后台配置文件config.json文件，config.json文件里面定义了编辑器的图片上传，文件上传，涂鸦上传和对应回显的一些配置。（当然config.json文件里面的路径也要改成自己服务器的路径。）

• /**
   * ueditor统一入口
   */
  
  @Controller
  @RequestMapping("ueditor")
  public class UeditorController {
  
      @RequestMapping(value="/config")
      public String config(HttpServletRequest request, HttpServletResponse response) {
          return "redirect:/js/ueditor/config.json";
      }
  
  }

  ueditor.config.js请求的后台统一路径里面要写的代码（我是重定向到config.json文件了），这样前端富文本就能获取到config.json文件中的上传接口相关的配置。上传功能就可以使用了。

• 加载执行的流程大概是：页面渲染编辑器 --->（使用上传功能时）发送服务器同一请求接口获取config.json文件 ---> 读取配置文件 ---> 上传文件调用配置文件的接口；

• 我没有对配置文件修改太多东西，只是在调用上传接口的时候复写了上传接口返回的路径；

• var ue = UE.getEditor('container',window.UEDITOR_CONFIG);
  // 重写文件上传路径
  UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
  UE.Editor.prototype.getActionUrl = function(action) {
      if (action == 'uploadimage' || action == 'uploadfile') {
          return '/ueditor/upload';
      } else {
          return this._bkGetActionUrl.call(this, action);
      }
  }

  *判断js中action的名称要和config.json里的action名称对应才可以对应返回自己想要的接口路径

• 

  这样我们就能上传图片到我们自定义的上传接口上了。

• 做到这一步基本上都已经完成了，如果上传功一张图片就会调用自己写的图片上传接口了。

三，小问题

• 关于图片回显上图中imageUrlPrefix是图片回显的前缀在回显到编辑器里的img标签地址上会自动加上该前缀，如果没有正确回显就看看img标签回显的地址是否和在自己服务器上的图片地址一致。
• layui中使用setContent() 给富文本赋值的时候会出现赋值不成功，加上setTimeout() 即可。

• setTimeout(function () {
      ue.setContent('给富文本赋值的内容');
  },500);

  到这里基本都结束了，需要特别定制化的功能就靠自己探索了。