栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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刷新一下。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/837895.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号