Spring boot 集成ckeditor
1:下载ckeditor 4.4.2 full package ,官网没有显示, 需要在最新版本的ckeditor download右键,复制链接, 输入到导航栏,将版本号改为自己想要的版本号。
https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.2/ckeditor_4.4.2_full.zip
2:修改 config.js,加载图片上传 插件
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/ CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config // The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
]; // Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript'; // Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre'; // Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.filebrowserImageUploadUrl= '/upload/image'; //上传图片后台接口
};
3:index.html 里面引入ckeditor编辑框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/config.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
4:搭建spring boot 框架,提供后台上传 图片接口
@Controller
public class CKEditorController { Logger logger = LogManager.getLogger(CKEditorController.class); @RequestMapping("/")
public String ckeditor(Model model) {
System.out.println("进入");
// Student student=new Student("AA","1","abcdljaldf");
// model.addAttribute("status","Hello");
// model.addAttribute("page",student);
return "/index.html";
} @Value(value = "${cbs.imagesPath}") //配置的图片路径
private String ckeditorStorageImagePath; @Value(value = "${cbs.imagesPath}")
private String ckeditorAccessImageUrl; @RequestMapping(value = "/upload/image", method = RequestMethod.POST)
@ResponseBody
public String uploadImage1(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
logger.debug("上传");
String name = "";
if (!file.isEmpty()) {
try {
response.reset();
// response.setContentType("text/html; charset=ISO-8859-1");
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(); // 最新版本的 会提示出错: getWriter has already exists,
// ServletOutputStream out = response.getOutputStream(); 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返回给ckeditor
String callback = request.getParameter("CKEditorFuncNum");
logger.debug("callback"+callback+"fileUrl"+fileUrl);
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());
e.printStackTrace();
}
} else {
// logger.info("You failed to upload " + name + " because the file was empty.");
}
return "SUCCESS";
} //加载图片
@RequestMapping(method = RequestMethod.GET, value = "/displayImage/{filename:.+}")
@ResponseBody
public ResponseEntity<?> getFile(@PathVariable String filename) {
System.out.println(filename );
try {
// return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath+imagePath, filename).toString()));
// return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath+imagePath, filename).toString()));
return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(ckeditorStorageImagePath, filename).toString()));
} catch (Exception e) {
return ResponseEntity.notFound().build();
}
}
}
5:前台访问,http://localhost:8080 ,上传图片,返回图片路径成功
Spring boot 集成ckeditor的更多相关文章
- Spring Boot集成Jasypt安全框架
Jasypt安全框架提供了Spring的集成,主要是实现 PlaceholderConfigurerSupport类或者其子类. 在Sring 3.1之后,则推荐使用PropertySourcesPl ...
- Spring boot集成swagger2
一.Swagger2是什么? Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格 ...
- Spring Boot 集成 Swagger,生成接口文档就这么简单!
之前的文章介绍了<推荐一款接口 API 设计神器!>,今天栈长给大家介绍下如何与优秀的 Spring Boot 框架进行集成,简直不能太简单. 你所需具备的基础 告诉你,Spring Bo ...
- spring boot 集成 zookeeper 搭建微服务架构
PRC原理 RPC 远程过程调用(Remote Procedure Call) 一般用来实现部署在不同机器上的系统之间的方法调用,使得程序能够像访问本地系统资源一样,通过网络传输去访问远程系统资源,R ...
- Spring Boot 集成Swagger
Spring Boot 集成Swagger - 小单的博客专栏 - CSDN博客https://blog.csdn.net/catoop/article/details/50668896 Spring ...
- spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,guava限流,定时任务案例, 发邮件
本文介绍spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例 集成swagger--对于做前后端分离的项目,后端只需要提供接口访问,swagger提供了接口 ...
- Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件
上一篇文章,写了如何搭建一个简单的Spring boot项目,本篇是接着上一篇文章写得:Spring boot入门:快速搭建Spring boot项目(一),主要是spring boot集成mybat ...
- (转)Spring Boot(十八):使用 Spring Boot 集成 FastDFS
http://www.ityouknow.com/springboot/2018/01/16/spring-boot-fastdfs.html 上篇文章介绍了如何使用 Spring Boot 上传文件 ...
- Spring Boot集成JPA的Column注解命名字段无效的问题
偶然发现,Spring Boot集成jpa编写实体类的时候,默认使用的命名策略是下划线分隔的字段命名. Spring Boot版本:1.5.4.release 数据表: id int, userNam ...
随机推荐
- Ubuntu 12.04.2 安装 Oracle11gR2
#step 1: groupadd -g 2000 dbauseradd -g 2000 -m -s /bin/bash -u 2000 griduseradd -g 2000 -m -s /bin/ ...
- Unity+NGUI性能优化方法总结
1 资源分离打包与加载 游戏中会有很多地方使用同一份资源.比如,有些界面会共用同一份字体.同一张图集,有些场景会共用同一张贴图,有些会怪物使用同一个Animator,等等.可以在制作游戏安装包时将这些 ...
- 面试题:谈谈如何优化MYSQL数据库查询
1.优化数据类型 MySQL中数据类型有多种,如果你是一名DBA,正在按照优化的原则对数据类型进行严格的检查,但开发人员可能会选择他们认为最简单的方案,以加快编码速度,或者选择最明显的选择,因此,你可 ...
- 世纪佳缘信息爬取存储到mysql,下载图片到本地,从数据库选取账号对其发送消息更新发信状态
利用这种方法,可以把所有会员信息存储下来,多线程发信息,10秒钟就可以对几百个会员完成发信了. 首先是筛选信息后爬取账号信息, #-*-coding:utf-8-*- import requests, ...
- Cocostudio学习笔记(2) Button + CheckBox
这篇记录了两个控件的使用流程:Button 和 CheckBox. ------------------------------------------------------------------ ...
- Effective C++ Item 15 Provide access to raw resources in resource-managing classes
In last two item, I talk about resource-managing using RAII, now comes to the practical part. Often, ...
- Android Tab切换
ViewPager+FragmentStatePagerAdapter 页面切换案例详解 http://blog.csdn.net/u010203181/article/details/4462963 ...
- oct()
oct() 用于将一个十进制的整数转换成八进制字符串 In [10]: oct(10) Out[10]: ' In [11]: oct(20) Out[11]: '
- 说说GPIO.H(NUC131)
/**************************************************************************//** * @file GPIO.h * @ve ...
- 有道云笔记同步IT笔试面试资源
有道云笔记同步资源 放在手机上ipad或者电脑上看..特别方便...精心整理..暂时只有c++的..希望大家喜欢 暂时只扒了一些c++的..java的随后扒 主要都是取自<程序员面试笔试宝典&g ...