SpringBoot+Vue 09--wangEditor富文本编辑器

一般应用于新闻、博客

wangEditor

官网https://www.wangeditor.com/

引入依赖
cnpm i wangeditor --save

数据库创建新表

SpringBoot+Vue 09--wangEditor富文本编辑器_第1张图片

创建对应的文件

复制粘贴改一改

  • News.java
    SpringBoot+Vue 09--wangEditor富文本编辑器_第2张图片
  • NewsMapper.java
  • NewsController.java
    SpringBoot+Vue 09--wangEditor富文本编辑器_第3张图片
  • News.vue
    SpringBoot+Vue 09--wangEditor富文本编辑器_第4张图片
    SpringBoot+Vue 09--wangEditor富文本编辑器_第5张图片
    把下面的接口也改了
  • 路由
    SpringBoot+Vue 09--wangEditor富文本编辑器_第6张图片
  • Aside.vue
    SpringBoot+Vue 09--wangEditor富文本编辑器_第7张图片
    运行
    SpringBoot+Vue 09--wangEditor富文本编辑器_第8张图片

把wangEditor引入界面

SpringBoot+Vue 09--wangEditor富文本编辑器_第9张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第10张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第11张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第12张图片
让editor成为全局变量,有些功能就能用了,否则有些功能可能获取不到editor的值
SpringBoot+Vue 09--wangEditor富文本编辑器_第13张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第14张图片

通过api实现获取值

SpringBoot+Vue 09--wangEditor富文本编辑器_第15张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第16张图片

获取当前用户、时间

  • 用户(作者)
    之前在session里面存了user对象
    SpringBoot+Vue 09--wangEditor富文本编辑器_第17张图片
    可以利用这个
    SpringBoot+Vue 09--wangEditor富文本编辑器_第18张图片
  • 时间
    SpringBoot+Vue 09--wangEditor富文本编辑器_第19张图片

详情

弹窗展示富文本内容
不能用detail,detail可能是关键字,会报错
SpringBoot+Vue 09--wangEditor富文本编辑器_第20张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第21张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第22张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第23张图片

编辑

SpringBoot+Vue 09--wangEditor富文本编辑器_第24张图片
SpringBoot+Vue 09--wangEditor富文本编辑器_第25张图片
可以通过复制网络图片地址的方法上传网络图片,也可以上传本地图片:

  • 配置接口:之前写过的上传文件的接口
    SpringBoot+Vue 09--wangEditor富文本编辑器_第26张图片
    但是会出现问题:自己上传文件请求的是:
    SpringBoot+Vue 09--wangEditor富文本编辑器_第27张图片
    ,而后端服务地址的9090。所以要写一个服务端的完整地址:
    http://localhost:9090/files/upload
    但是wangEditor对接口格式也有要求,须按照要求书写,所以要按照格式专门写一个用于富文本编辑器的接口。
    SpringBoot+Vue 09--wangEditor富文本编辑器_第28张图片
    SpringBoot+Vue 09--wangEditor富文本编辑器_第29张图片
    但是出现找不到文件的500错误。解决方法:
    SpringBoot+Vue 09--wangEditor富文本编辑器_第30张图片
    SpringBoot+Vue 09--wangEditor富文本编辑器_第31张图片
    在编辑函数里面也加上
    SpringBoot+Vue 09--wangEditor富文本编辑器_第32张图片
    SpringBoot+Vue 09--wangEditor富文本编辑器_第33张图片

但是每个编辑点开都是一样的……解决方法:
SpringBoot+Vue 09--wangEditor富文本编辑器_第34张图片
把editor刷新一下。

你可能感兴趣的:(vue,vue)