使用 SpringBoot + Ckeditor 富文本编辑器、图片上传

最新推荐文章于 2025-04-06 07:35:53 发布

IT小村

最新推荐文章于 2025-04-06 07:35:53 发布

阅读量6k

点赞数 6

文章标签： ckeditor 文本编辑编辑器

本文链接：https://blog.csdn.net/larger5/article/details/79399187

版权

一、前言

在一些页面中，进行发表文章、评论等功能，都要涉及到富文本编辑器，
如 CSDN 的 markdown 编辑器
这里写图片描述
使用传统的 textarea 标签是远远满足不了需求的，
现在流行的富文本编辑器主要有两个，ckeditor 和百度的 UEditor，
① 前者比较简单，可以先感受一下富文本编辑器。
② 后者功能更加强大，可以单图、多图上传，还可以截图、代码高亮等特性，但是使用起来不太通用、简单。

二、代码示例

下面来个 [文本读写]

1、前端
简单的界面 edit.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文本编辑器</title>
        <!--引入ckeditor-->
        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
        <script type="text/javascript">
            //替换指定name的textarea为富文本编辑器
            CKEDITOR.replace('edi')
        </script>
    </head>

    <body>

        <form action="diary/sub" method="post">
            <div>
                <!--加入ckdeitor类使其为富文本编辑器-->
                <textarea class="ckeditor" name="edi"></textarea>
            </div>
            <input type="submit" value="提交" />
        </form>

    </body>

</html>