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,这个也要划下重点。
现在上传一张图片试一试
好了,到现在就是真正的完成了。