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. SQLServer------begin tran/commit tran事务的使用方法

    转载: http://www.cnblogs.com/accumulater/p/6089838.html 介绍 BEGIN TRAN 标记事务开始 COMMIT TRAN 提交事务 一般把DML语句 ...

  2. swift - 之 UICollectionView的用法/自定义流布局

    具体代码如下: 1.声明 var hCollectionView:UICollectionView? var layout:UICollectionViewFlowLayout? let course ...

  3. m2014-architecture-imgserver->Lighttpd Mod_Cache很简单很强大的动态缓存

    Lighttpd是一个德国人领导的开源软件,其根本的目的是提供一个专门针对高性能网站,安全.快速.兼容性好并且灵活的web server环境.具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模 ...

  4. C语言100个经典的算法之兔子总数计算内含printf的用法

    语言的学习基础,100个经典的算法 C语言的学习要从基础开始,这里是100个经典的算法-1C语言的学习要从基础开始,这里是100个经典的算法 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一 ...

  5. c++11——lambda表达式

    lambda表达式 函数式编程的一个语法,有如下优点: (1)声明式编程风格:就地匿名定义目标函数或函数对象,不需要额外写一个命名函数或者函数对象.以更直接的方式写程序,好的可读性和可维护性. (2) ...

  6. tp5 集成 layui富文本编辑器

    编辑器地址:http://www.layui.com/doc/modules/layedit.html 一睹芳容 1 去官网:http://www.layui.com/     下载layui ├─c ...

  7. CSS-用伪元素制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  8. setTimeout原来有这种用途

    setTimeout有两个参数,第一个是需要执行的函数,第二个是将该函数推入UI队列的时间. 需要注意的两点: 1.第二个参数中设置的时间,是从执行setTimeout开始计算,而不是从整个函数执行完 ...

  9. 以用户名注册来分析三种Action获取数据的方式

    1.注入属性 直接注入属性: public String userName; public String getUserName() { return userName; } public void ...

  10. 2800 送外卖[状态压缩dp]

    2800 送外卖  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 有一个送外卖的,他手上有n份订单,他 ...