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. Java中的各种加密算法

    Java中为我们提供了丰富的加密技术,可以基本的分为单向加密和非对称加密 1.单向加密算法 单向加密算法主要用来验证数据传输的过程中,是否被篡改过. BASE64 严格地说,属于编码格式,而非加密算法 ...

  2. UVA 1341 - Different Digits（数论)

    UVA 1341 - Different Digits 题目链接 题意:给定一个正整数n.求一个kn使得kn上用的数字最少.假设同样,则输出值最小的 思路: 首先利用鸽笼原理证明最多须要2个数字去组成 ...

  3. 自定向下分析Binder 之 Binder Model（1）

    Java层的Binder对象模型: IBinder IBinder是Binder通信机制中的核心部分(Base interface for a remotable object, the core p ...

  4. 超全面的JavaWeb笔记day04<dom树等>

    1.案例:在末尾添加节点(*****) 创建标签 createElement方法 创建文本 createTextNode方法 把文本添加到标签下面 appendChild方法 2.元素对象(了解) 如 ...

  5. break、continue、return之间的区别与联系

    今天在部署程序的时候,监控日志发现这个问题了.return的问题就这么总结哈. 在软件开发过程中,逻辑清晰是非常之重要的. 代码的规范也是非常重要的.往往细节决定成败.在编写代码的时候,一定要理解语言 ...

  6. Python 入门（六）Dict和Set类型

    什么是dict 我们已经知道,list 和 tuple 可以用来表示顺序集合,例如,班里同学的名字: ['Adam', 'Lisa', 'Bart'] 或者考试的成绩列表: [95, 85, 59] ...

  7. /etc/redhat-release

    该文件用于记录 RedHat 的发行版本信息 [root@localhost ~]$ cat /etc/redhat-release CentOS release 6.5 (Final)

  8. lua垃圾回收机制

    一.检测lua内存泄漏: 注:使用“collectgarbage("collect")”,局部变量v被回收,my_list没有被回收. 注:局部变量v占用的内存被回收. 注:将my ...

  9. oracle中怎么用normal方式登录怎么自定义用户名和密码

    1.首先要创建一个用户.必须使用有最高权限的用户来创建,语句如下: create user shopping identified by 123456;--创建shopping用户,密码123456 ...

  10. <转>主成分分析（Principal components analysis）-最大方差解释,最小平方差解释

    转自http://www.cnblogs.com/jerrylead/archive/2011/04/18/2020209.html http://www.cnblogs.com/jerrylead/ ...