springBoot集成CKEditor

时间:2024-04-02 08:48:52

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>

界面就已经出现了
springBoot集成CKEditor

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

springBoot集成CKEditor

最后的话就是图片上传了,5.0版本的编辑器接收参数必须是 upload 这个要注意下,不然上传会一直报错
springBoot集成CKEditor

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

现在上传一张图片试一试

springBoot集成CKEditor

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