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. 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/ ...

  2. Unity+NGUI性能优化方法总结

    1 资源分离打包与加载 游戏中会有很多地方使用同一份资源.比如,有些界面会共用同一份字体.同一张图集,有些场景会共用同一张贴图,有些会怪物使用同一个Animator,等等.可以在制作游戏安装包时将这些 ...

  3. 面试题：谈谈如何优化MYSQL数据库查询

    1.优化数据类型 MySQL中数据类型有多种,如果你是一名DBA,正在按照优化的原则对数据类型进行严格的检查,但开发人员可能会选择他们认为最简单的方案,以加快编码速度,或者选择最明显的选择,因此,你可 ...

  4. 世纪佳缘信息爬取存储到mysql,下载图片到本地，从数据库选取账号对其发送消息更新发信状态

    利用这种方法,可以把所有会员信息存储下来,多线程发信息,10秒钟就可以对几百个会员完成发信了. 首先是筛选信息后爬取账号信息, #-*-coding:utf-8-*- import requests, ...

  5. Cocostudio学习笔记（2） Button + CheckBox

    这篇记录了两个控件的使用流程:Button 和 CheckBox. ------------------------------------------------------------------ ...

  6. 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, ...

  7. Android Tab切换

    ViewPager+FragmentStatePagerAdapter 页面切换案例详解 http://blog.csdn.net/u010203181/article/details/4462963 ...

  8. oct()

    oct() 用于将一个十进制的整数转换成八进制字符串 In [10]: oct(10) Out[10]: ' In [11]: oct(20) Out[11]: '

  9. 说说GPIO.H(NUC131)

    /**************************************************************************//** * @file GPIO.h * @ve ...

  10. 有道云笔记同步IT笔试面试资源

    有道云笔记同步资源 放在手机上ipad或者电脑上看..特别方便...精心整理..暂时只有c++的..希望大家喜欢 暂时只扒了一些c++的..java的随后扒 主要都是取自<程序员面试笔试宝典&g ...