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

一般应用于新闻、博客

wangEditor

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

引入依赖
cnpm i wangeditor --save

数据库创建新表

创建对应的文件

复制粘贴改一改

• News.java
  
• NewsMapper.java
• NewsController.java
  
• News.vue
  
  
  把下面的接口也改了
• 路由
  
• Aside.vue
  
  运行
  

把wangEditor引入界面

让editor成为全局变量，有些功能就能用了，否则有些功能可能获取不到editor的值

通过api实现获取值

获取当前用户、时间

• 用户（作者）
  之前在session里面存了user对象
  
  可以利用这个
  
• 时间
  

详情

弹窗展示富文本内容
不能用detail，detail可能是关键字，会报错

编辑

可以通过复制网络图片地址的方法上传网络图片，也可以上传本地图片：

• 配置接口：之前写过的上传文件的接口
  
  但是会出现问题：自己上传文件请求的是：
  
  ，而后端服务地址的9090。所以要写一个服务端的完整地址：
  http://localhost:9090/files/upload
  但是wangEditor对接口格式也有要求，须按照要求书写，所以要按照格式专门写一个用于富文本编辑器的接口。
  
  
  但是出现找不到文件的500错误。解决方法：
  
  
  在编辑函数里面也加上
  
  

但是每个编辑点开都是一样的……解决方法：

把editor刷新一下。