SpringBoot集成CKEditor4

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

浮灬夸

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

阅读量387

点赞数

CC 4.0 BY-SA版权

分类专栏：原创成长毕设之路文章标签： spring boot ckeditor java javascript

本文链接：https://blog.csdn.net/KyrieOH/article/details/111306432

原创同时被 3 个专栏收录

10 篇文章

订阅专栏

成长

9 篇文章

订阅专栏

毕设之路

2 篇文章

订阅专栏

本文介绍了如何在SpringBoot项目中集成CKEditor4，包括从官网下载CKEditor4的ZIP压缩包，将其解压到项目的static目录下，创建编辑页面edit.html，以及展示集成后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    var image = '';
    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById('image').src = evt.target.result;
            image = evt.target.result;
        }
        reader.readAsDataURL(file.files[0]);
    }
</script>
<!--更换队标-->
<script>
    $(function () {
        $("#changeImage").click(
            function () {
                $("#file").trigger("click")
            }
        )
    })
</script>

SpringBoot集成CKEditor4

1. 到官网下载CKEditor4的Zip压缩包

官网图
在这里插入图片描述

说明：现在CKEditor最新版是5+ 使用最新版时，要注意浏览器的版本是否支持，否则样式会显示不出

本人此次项目使用的是CKEditor4.15

在这里插入图片描述

然后点击右上角的Download

选择想要的类型
在这里插入图片描述

2. 下载完压缩包后解压后放到项目中的static目录下

在这里插入图片描述

3. 编写测试页面edit.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>篮球club后台管理</title>
</head>
<script type="text/javascript" src="/static/ckeditor_4.15/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.env.isCompatible = true;
</script>
<body>
<div>
    <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
</div>
<div align="center">
    <input type="button" onclick="buttonSubmit()" style="width: 100px;height: 35px;" value="提交表单" />
</div>

</body>

4. 效果图

在这里插入图片描述