Spring Boot集成CKEditor
2019独角兽企业重金招聘Python工程师标准>>>
CKEditor is a free, Open Source HTML text editor designed to simplify website content creation.
背景
项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合SpringMVC介绍的不错,内容很详细,可是我们用的是Spring boot,这就蛋疼了,加上CKeditor不熟悉,走了一些弯路,搞了好久,参考一些前辈的文章,加上自己的理解,终于run起来了。通过这次捣鼓,搞明白了一件事,一步步走,一步步实现效果,之前看到网上有现成的,直接搞起,到最后灰头土脸。
集成
1.官网demo
官网给出了几种使用样式,可以参考一下。Github上有源码,可以过去玩玩ckeditor-docs-samples.
我是参考的Article-editor,感觉这个就不错。
2.搭建工程
Spring Boot工程先搞起来,工程目录如下:
工程使用了Spring data jpa,还有thymeleaf。启动后的效果。
页面上的输入框有数据,就说明天前后台交互没问题。
@RequestMapping(value = "/login",method = RequestMethod.GET)public ModelAndView index(org.springframework.ui.Model model){Student student=new Student("AA","1","abcdljaldf");model.addAttribute("status","Hello");model.addAttribute("page",student);return new ModelAndView("/index");}
3.集成CKEditor
把下载后的文件夹ckeditor放到static目录下面,static是Spring Boot默认的资源路径。
参考Article-editor样式。
index.html
中引入ckeditor.js。
<script th:src="@{/ckeditor/ckeditor.js}"></script>
config.js
是默认导入的,参考ckeditor.js
。
如果想定制样式在config.js
中就可以,另外写一个js也可以,不过需要html中需要引入,会覆盖掉config.js
中的配置。
集成后的效果:
还有一种最简单的使用方式,直接在textarea的class里面添加CKEditor。只是效果没官网给的好看。
<textarea cols="80" class="ckeditor" id="editor1" name="comments" rows="10">
</textarea>
接下来就用这种简洁的方式。
上传
1.上传按钮
默认是没有上传按钮的。
config.js
中配置config.filebrowserImageUploadUrl
。
config.filebrowserImageUploadUrl= '/files/upload/image'
。
/files/upload/image
这个是后台配置的@RequestMapping里面的值。
上传tab出来了。。。
2.代码实现
1.application.properties
application.properties
中配置存储路径和访问URL
2.资源路径配置
把本地的绝对路径加到spring boot的静态资源路径里,作为资源服务器使用。
3.上传处理
@Controller
@RequestMapping("/files")
public class FilesController {Logger logger = org.apache.log4j.Logger.getLogger(FilesController.class);@Value(value = "${ckeditor.storage.image.path}")private String ckeditorStorageImagePath;@Value(value = "${ckeditor.access.image.url}")private String ckeditorAccessImageUrl;@RequestMapping(value = "/upload/image", method = RequestMethod.POST)@ResponseBodypublic String uploadImage(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {String name = "";if (!file.isEmpty()) {try {response.setContentType("text/html; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");//解决跨域问题//Refused to display 'http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.response.setHeader("X-Frame-Options", "SAMEORIGIN");PrintWriter out = response.getWriter();String fileClientName = file.getOriginalFilename();String pathName = ckeditorStorageImagePath + fileClientName;File newfile = new File(pathName);byte[] bytes = file.getBytes();BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));stream.write(bytes);stream.close();// 组装返回url,以便于ckeditor定位图片String fileUrl = ckeditorAccessImageUrl + File.separator + newfile.getName();// 将上传的图片的url返回给ckeditorString callback = request.getParameter("CKEditorFuncNum");String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileUrl + "');</script>";out.println(script);out.flush();out.close();} catch (Exception e) {logger.info("You failed to upload " + name + " => " + e.getMessage());}} else {logger.info("You failed to upload " + name + " because the file was empty.");}return "SUCCESS";}
}
这里参考基于spring-boot的web应用,ckeditor上传文件图片文件实现的。上传也可以集成CKFinder来实现,问题是CKFinder不是开源的软件,对java的支持也停留在2.6.2.1
,所以上传方法自己写一下了。
3.上传效果
本地路径下面的图片
后台交互
页面上能够显示了,怎么保存到数据库呢?看官网给的解释Saving Data。
上面可以看出,提交到后台的是一段html文本。来验证一下,页面上随便来点文本,加点样式,上传个图片。
传过来的是一段文本,数据库在保存的时候,字段的值范围设的大一些或者直接设置字段类型为longtext
优化
1.预览优化
预览显示一段英文,这个去掉好看些。
ckeditor/plugins/image/dialogs/image.js
,把||
后面的那段英文删除。
参考
基于spring-boot的web应用,ckeditor上传文件图片文件
代码示例
转载于:https://my.oschina.net/wuxinshui/blog/967674
Spring Boot集成CKEditor相关推荐
- Spring Boot集成CKFinder
2019独角兽企业重金招聘Python工程师标准>>> Spring Boot集成CKFinder,实现浏览功能. 前言 上一篇记录了Spring Boot集成CKEditor,这里 ...
- Spring Boot集成Swagger导入YApi@无界编程
接口APi开发现状 现在开发接口都要在类似YApi上写文档,这样方便不同的团队之间协作,同步更新接口,提高效率. 但是如果接口很多,你一个个手工在YApi去录入无疑效率很低. 如果是使用Spring ...
- spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例...
本文介绍spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例 集成swagger--对于做前后端分离的项目,后端只需要提供接口访问,swagger提供了接口 ...
- 6.3 Spring Boot集成mongodb开发
6.3 Spring Boot集成mongodb开发 本章我们通过SpringBoot集成mongodb,Java,Kotlin开发一个极简社区文章博客系统. 0 mongodb简介 Mongo 的主 ...
- springboot(十八):使用Spring Boot集成FastDFS
上篇文章介绍了如何使用Spring Boot上传文件,这篇文章我们介绍如何使用Spring Boot将文件上传到分布式文件系统FastDFS中. 这个项目会在上一个项目的基础上进行构建. 1.pom包 ...
- Spring Boot集成Hazelcast实现集群与分布式内存缓存
2019独角兽企业重金招聘Python工程师标准>>> Hazelcast是Hazelcast公司开源的一款分布式内存数据库产品,提供弹性可扩展.高性能的分布式内存计算.并通过提供诸 ...
- Spring Boot 集成 Swagger 生成 RESTful API 文档
原文链接: Spring Boot 集成 Swagger 生成 RESTful API 文档 简介 Swagger 官网是这么描述它的:The Best APIs are Built with Swa ...
- 【Java进阶】Spring Boot集成ES
目录 spring boot集成ES ElasticSearchConfig 测试文档的基本操作 Elasticsearch Clients 文档 spring boot集成ES Java REST ...
- Spring Boot集成Jasypt安全框架
Jasypt安全框架提供了Spring的集成,主要是实现 PlaceholderConfigurerSupport类或者其子类. 在Sring 3.1之后,则推荐使用PropertySourcesPl ...
最新文章
- Android 10 新增的功能
- pandas 将自己的文件写入csv
- RetinaFace 人脸关键点
- PyQt5 图形界面 - Qt Designer独立安装包,仅需30M!python图像化界面绘制工具
- 不负众望,窝窝世界新版放出(内测):P
- java11开源中国,Java 11 正式发布!
- 不要一辈子靠技术生存!!
- status_code想要得到302却得到200_中考200天倒计时!教你高效规划!抓紧抢报预留座位!...
- swift for循环_Swift | 实战一个简单的素数计算器demo
- .net mysql 更新_升级 MySql.Data for NET 后遇到的神坑
- keyshot9怎么导入材质_你知道硬质合金刀片是怎么来的吗?讲解直观!
- jmeter html测试脚本,Jenkins如何实现自动运行jmeter脚本并出具报告
- VS 2017 RC到期的解决方法
- 【数据结构】顺序线性表的几种常用方法
- 计算机印屏幕功能无法使用,笔记本电脑无法使用外接显示屏幕扩展功能
- Mac os镜像下载地址记录
- Win10重装系统后进行初始化
- 高中教师计算机水平要求,高中信息技术教师考试大纲
- Spring+Struts2+Hibernate概述
- 微信小程序自定义生成动态分享内容
热门文章
- android 监听时钟变化,Android4.4 SystemUI分析之Clock时钟显示
- java final 变量 回收_在Java中将final用于变量会改善垃圾回收吗?
- 学习笔记(七)——jQuery(一)
- 计算机虚拟化技术论文,【计算机网络论文】虚拟技术计算机网络论文(共1775字)...
- 分布式事务——消息最终一致性方案
- 系统优化怎么做-新系统上线前做什么
- 使用uni-app开发微信小程序之登录模块
- linux提取字符串特定结果
- ios开发 自定义btn_iOS一步步实现一个高度自定义UIButton控件
- 洲际的merlin怎么用_天问一号是怎么拍摄地月合影的?