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的更多相关文章

  1. Spring Boot集成Jasypt安全框架

    Jasypt安全框架提供了Spring的集成,主要是实现 PlaceholderConfigurerSupport类或者其子类. 在Sring 3.1之后,则推荐使用PropertySourcesPl ...

  2. Spring boot集成swagger2

    一.Swagger2是什么? Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格 ...

  3. Spring Boot 集成 Swagger，生成接口文档就这么简单！

    之前的文章介绍了<推荐一款接口 API 设计神器!>,今天栈长给大家介绍下如何与优秀的 Spring Boot 框架进行集成,简直不能太简单. 你所需具备的基础 告诉你,Spring Bo ...

  4. spring boot 集成 zookeeper 搭建微服务架构

    PRC原理 RPC 远程过程调用(Remote Procedure Call) 一般用来实现部署在不同机器上的系统之间的方法调用,使得程序能够像访问本地系统资源一样,通过网络传输去访问远程系统资源,R ...

  5. Spring Boot 集成Swagger

    Spring Boot 集成Swagger - 小单的博客专栏 - CSDN博客https://blog.csdn.net/catoop/article/details/50668896 Spring ...

  6. spring boot集成swagger，自定义注解，拦截器，xss过滤，异步调用，guava限流，定时任务案例, 发邮件

    本文介绍spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例 集成swagger--对于做前后端分离的项目,后端只需要提供接口访问,swagger提供了接口 ...

  7. Spring boot入门（二）：Spring boot集成MySql,Mybatis和PageHelper插件

    上一篇文章,写了如何搭建一个简单的Spring boot项目,本篇是接着上一篇文章写得:Spring boot入门:快速搭建Spring boot项目(一),主要是spring boot集成mybat ...

  8. （转）Spring Boot(十八)：使用 Spring Boot 集成 FastDFS

    http://www.ityouknow.com/springboot/2018/01/16/spring-boot-fastdfs.html 上篇文章介绍了如何使用 Spring Boot 上传文件 ...

  9. Spring Boot集成JPA的Column注解命名字段无效的问题

    偶然发现,Spring Boot集成jpa编写实体类的时候,默认使用的命名策略是下划线分隔的字段命名. Spring Boot版本:1.5.4.release 数据表: id int, userNam ...

随机推荐

  1. 定义的函数在main中调用时提示找不到标识符

    要把定义的函数放在main函数前,如果放在main函数后了,要在main前做声明.声明就是把函数定义的首部一行加一个分号放在main之前. 在c语言中自定义了一个函数,在main中调用时提示找不到标识 ...

  2. brew faq:call ISHELL_GetJulianDate always return 1980 1 6

    假设你当时系统的时间为20130804000000,那么如果你将系统的时间改为20140104000000,那么ISHELL_GetJulianDate  将返回20140104000000. 但如果 ...

  3. 工作流JBPM_day01：3-使用JBPM的API添加与执行流程

    工作流JBPM_day01:3-使用JBPM的API添加与执行流程 流程定义画完得到压缩文件--->部署流程定义-->启动流程实例-->查询我的个人任务列表-->办理任务--& ...

  4. 超全面的JavaWeb笔记day06<Schema&SAX&dom4j>

    1.Schema的简介和快速入门(了解) 2.Schema文档的开发流程(了解) 3.Schema文档的名称空间(了解) 4.SAX解析原理分析(*********) 5.SAX解析xml获得整个文档 ...

  5. Ext3.4-EXT之嵌套表格的实现

    其中使用到的"RowExpander.js"为extjs官方示例中自带的. 实现这个嵌套表格要注意两点技巧: 1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节 ...

  6. Error: could not find java.dll如何解决

    安装配置Java环境变量,在命令行中运行java -version进行测试时却出现下面的问题: Error: opening registry key 'Software\JavaSoft\Java ...

  7. python2.0_s12_day9之day8遗留知识（queue队列&生产者消费者模型）

    4.线程 1.语法 2.join 3.线程锁之Lock\Rlock\信号量 4.将线程变为守护进程 5.Event事件 * 6.queue队列 * 7.生产者消费者模型 4.6 queue队列 que ...

  8. Python 进阶（一）函数式编程

    来自慕课网: 简介: 函数:function ,在入门课程已学 函数式:functional,一种编程范式 函数式编程是一种抽象计算的编程模式,函数≠函数式,好比:计算≠计算机

  9. Zookeeper（一）-- 简介以及单机部署和集群部署

    一.分布式系统 由多个计算机组成解决同一个问题的系统,提高业务的并发,解决高并发问题. 二.分布式环境下常见问题 1.节点失效 2.配置信息的创建及更新 3.分布式锁 三.Zookeeper 1.定义 ...

  10. linux 输入“make"命令不能执行

    我用的是VM 虚拟机的CDLinux,我想手动安装网卡驱动.网卡驱动也已经复制到linux 系统中了.接下来应该输入:makemake install可窗口提示:-bash:make :command ...