SpringBoot+ Vue + vue-cli + UEditor 百度富文本编辑器

SpringBoot+ Vue + vue-cli3+ UEditor详细教程

• 第一步,下载UEditor官网代码：
  • 地址：https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads
  • 如图，楼主下载的是utf8-php.zip，解压。
    
• 第二步，Vue项目中的操作：
  • 1、将下载的文件，解压，放入Public目录下，如下：
    
    • 注意：楼主这里使用的是Vue-cli3,如果是Vue-cli2的话，放入的目录应该是，static下。
      
  • 2、在main.js中，注册组件：
    
    • 代码：
      • import VueUeditorWrap from 'vue-ueditor-wrap'
      • Vue.component('VueUeditorWrap',VueUeditorWrap)
  • 3、编辑器页面，使用v-model绑定数据，如下：
    
    • 如果Vie-cli2, 修改： UEDITOR_HOME_URL: '/static/UEditor/'
  • 4、效果图：
    
• 第三步，后端实现：
  • 1、引入UEditor包：
    
  • 2、接口：
    
  • 3、config.json。放在resources下面：
    
    • 需要修改的地方：
      
      • 1、上传文件的基本路径；
      • 2、图片访问路径的前缀；
      • 3、上传保存路径；
  • 4、application.yml文件，添加如下：
    
    • upload-path: 替换为自己的。
  • 需要注意的内容：
    • 1、在BinaryUploader类中无法获取到字节流。
      • 原因： SpringMVC框架对含字节流的request进行了处理，此处传的是处理过的request，故获取不到字节流。此时采用SpringMVC框架的解析器multipartResolver。
      • 解决： 要进行修改。
    • 2、修改ConfigManage类的getConfigPath()方法，使其能加载config.json文件：
      
• Vue-ueditor-wrap 地址：
  • https://gitee.com/a1277609958/vue-ueditor-wrap
• 以上源码地址：
  • https://github.com/florarose/com.merry.tool/tree/master/SpringBoot-Ueditor