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下使用sublime text进行C编程开发尝鲜

    1 选择编译系统 2 编写文件,编译(Ctrl+B)运行(Shift+Ctrl+B)

  2. js表单计算金额问题

    <table width="600" border="1" align="center" style="text-align ...

  3. 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码

    工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  4. ios开发之--UIDocumentInteractionController的使用（实现更多分享服务）

    最近在做项目的时候,碰到这样一个需求,就是本地生成pdf文件,然后本地打开,经过测试发现,pdf文件是无法保存到相册里面的,只能存到手机里面,鉴于苹果的存储机制,需要取出来,进行本地展示,可以直接传到 ...

  5. 上传绕过WAF的tips大全

    原始默认状态: ——WebKitFormBoundary2smpsxFB3D0KbA7D Content-Disposition: form-data; name=”filepath”; filena ...

  6. unable to execute dex:GC overhead limit exceeded unable to execute dex:java heap space 解决方案

    最近做厂商适配,厂商提供了一部分Framework的jar包,把jar包通过Add Jar放到Build Path中, 在生成APK过程中,Eclipse长时间停留在100%那个进度. 最后Eclip ...

  7. poj_1988 并查集

    题目大意 开始有N堆砖块,编号为1,2....N,每堆都只有一个.之后可以进行两种操作: (1)M X Y 将编号为X的砖块所在的那堆砖拿起来放到编号为Y的砖块所在的堆上: (2)C X 查询编号为X ...

  8. stringstream读入每行数据

    做了下阿里的编程测试题,就30分钟,不是正常的输入输入,直接给一个数组作为输入. 于是带想题和处理数据花了20分钟,最后10分钟搞一个dij模版, 竟然只过了66%,应该是我数组开小了. 题目数据量没 ...

  9. CodeForces - 459E Pashmak and Graph[贪心优化dp]

    E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. Jboss AS 7 部署web应用程序时无法初始化spring的bean的解决办法

    Jboss AS 7 在部署web应用程序的时候无法初始化spring的bean(在tomcat下边不会出现这个问题) 原因是web应用程序没有导入jboss对spring的支持的jar包 解决方法: ...