springBoot集成CKEditor

最新推荐文章于 2023-07-21 10:57:14 发布

路边小青年

最新推荐文章于 2023-07-21 10:57:14 发布

阅读量1.7k

点赞数

分类专栏： JAVA 富文本文章标签： CKEditor JAVA springboot 集成CKEditor 富文本

本文链接：https://blog.csdn.net/weixin_42780235/article/details/83308517

版权

JAVA 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

富文本

1 篇文章 0 订阅

订阅专栏

springBoot集成CKEditor

由于项目中用到了富文本编辑器，CKEditor在网上的评价都还不错，就采用了这个，正好在此分享一下CKEditor的基础用法。

这里就是直接去官网下载的最新版本，5.0的版本，不同的版本貌似有些用法不太一样。

1、创建springboot项目，将下载的CKEditor包放到static目录下
2、新建html页面引入editor

<body>
    <div>
        <textarea id="TextArea1"cols="20" rows="2"class="ckeditor"></textarea>
    </div>
    <div align="center">
        <input type="button" onclick="buttonSubmit()" style="width: 60px;height: 35px;" value="提交表单" />
    </div>

</body>

<script type="text/javascript"src="/ckEditor/ckeditor.js"></script>

<script type="text/javascript">
    function buttonSubmit() {
        alert("走到方法")
        var a=CKEDITOR.instances.TextArea1.getData();
        alert(a)
    }
</script>

界面就已经出现了
在这里插入图片描述

然后配置一下图片上传，配置完路径之后，点击图片才会出现上传按钮

在这里插入图片描述

最后的话就是图片上传了，5.0版本的编辑器接收参数必须是 upload 这个要注意下，不然上传会一直报错
在这里插入图片描述

这样的话上传图片就已经大功告成了，现在还有最重要的一点就是回显了，CKEditor5.0的版本要求返回的数据是json格式的，之前应该是html，这个也要划下重点。
在这里插入图片描述

现在上传一张图片试一试

在这里插入图片描述

好了，到现在就是真正的完成了。

路边小青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springBoot集成CKEditor

springBoot集成CKEditor由于项目中用到了富文本编辑器，CKEditor在网上的评价都还不错，就采用了这个，正好在此分享一下CKEditor的基础用法。这里就是直接去官网下载的最新版本，5.0的版本，不同的版本貌似有些用法不太一样。1、创建springboot项目，将下载的CKEditor包放到static目录下2、新建html页面引入editor&amp;amp;lt;body&amp;amp;gt;...
复制链接

扫一扫