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下。
-
注意：楼主这里使用的是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、将下载的文件，解压，放入Public目录下，如下：
-
第三步，后端实现：
-
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文件：
-
1、在BinaryUploader类中无法获取到字节流。
-
1、引入UEditor包：
- Vue-ueditor-wrap 地址：
- 以上源码地址：