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 ...
随机推荐
- SQLServer------begin tran/commit tran事务的使用方法
转载: http://www.cnblogs.com/accumulater/p/6089838.html 介绍 BEGIN TRAN 标记事务开始 COMMIT TRAN 提交事务 一般把DML语句 ...
- swift - 之 UICollectionView的用法/自定义流布局
具体代码如下: 1.声明 var hCollectionView:UICollectionView? var layout:UICollectionViewFlowLayout? let course ...
- m2014-architecture-imgserver->Lighttpd Mod_Cache很简单很强大的动态缓存
Lighttpd是一个德国人领导的开源软件,其根本的目的是提供一个专门针对高性能网站,安全.快速.兼容性好并且灵活的web server环境.具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模 ...
- C语言100个经典的算法之兔子总数计算内含printf的用法
语言的学习基础,100个经典的算法 C语言的学习要从基础开始,这里是100个经典的算法-1C语言的学习要从基础开始,这里是100个经典的算法 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一 ...
- c++11——lambda表达式
lambda表达式 函数式编程的一个语法,有如下优点: (1)声明式编程风格:就地匿名定义目标函数或函数对象,不需要额外写一个命名函数或者函数对象.以更直接的方式写程序,好的可读性和可维护性. (2) ...
- tp5 集成 layui富文本编辑器
编辑器地址:http://www.layui.com/doc/modules/layedit.html 一睹芳容 1 去官网:http://www.layui.com/ 下载layui ├─c ...
- CSS-用伪元素制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- setTimeout原来有这种用途
setTimeout有两个参数,第一个是需要执行的函数,第二个是将该函数推入UI队列的时间. 需要注意的两点: 1.第二个参数中设置的时间,是从执行setTimeout开始计算,而不是从整个函数执行完 ...
- 以用户名注册来分析三种Action获取数据的方式
1.注入属性 直接注入属性: public String userName; public String getUserName() { return userName; } public void ...
- 2800 送外卖[状态压缩dp]
2800 送外卖 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 有一个送外卖的,他手上有n份订单,他 ...