CKEditor5 使用第二天 获取回传数据,图片上传

Posted heguxin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CKEditor5 使用第二天 获取回传数据,图片上传相关的知识,希望对你有一定的参考价值。

1、当系统中存在编辑功能时,需要将数据库中数据回显到页面,因此采用了最一般的方法,通过隐藏的input标签存贮,在通过CkEditor5中的setData方法将数据赋值到富文本框中

<textarea id="pc" name="pc" th:value="$pdSo.pc" style="display: none;"></textarea>
<input id="pc1" name="pc1" th:value="$pdSo.pc" class="form-control" type="text" style="display: none;">

技术图片

2、实现CKEditor5的图片上传

通过CKEditor的ckfinder属性,定义自己的上传请求地址,网上说有三种上传方式,我只实现了一种

后台通过MultipartFile来接收前台的参数,但是参数名称为upload,可以在页面上抓包可以看到,这里尤其要注意

技术图片

 

技术图片

 

 请求成功后要返回json字符串,要包括uploaded,url两个属性,采用map方式,回传到页面即可,url为存储地址

技术图片

 

以上是关于CKEditor5 使用第二天 获取回传数据,图片上传的主要内容,如果未能解决你的问题,请参考以下文章

CKEditor5 + vue2.0 富文本编辑器 图片上传highlight等用法

js怎么实现根据后台回传的数据对商品进行排序?

第二天——UM编辑器布置以及图片添加

CKEditor5的入门使用(react)

webbrowser控件如何获取网页回传的数据

训练营第二天