1、要在 ckeditor的  config.js 文件中加上

CKEDITOR.editorConfig = function( config ) {

config.filebrowserImageUploadUrl = 'ckEditImageUpload';//上传图片的接口
};

2、实现上传接口

@RequestMapping(value = "ckEditImageUpload", method = RequestMethod.POST)
    @ResponseBody
    public String ckEditImageUpload(MultipartHttpServletRequest request,HttpServletResponse response) throws BaseException
    {
        String fullPath = null;
        String callback = request.getParameter("CKEditorFuncNum");
        MultipartFile file = request.getFile("upload");
        fullPath = uploadService.getFileUrl(file);
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("X-Frame-Options", "SAMEORIGIN");
        return "<script type='text/javascript'>"
        + "window.parent.CKEDITOR.tools.callFunction(" + callback
        + ",'" + fullPath + "',''" + ")"+"</script>";
    }

另在页面中插入ckeditor:

引入js   <script type="text/javascript" src="${rootURL}resources/ckeditor/ckeditor.js"></script>

替换

<td colspan="3">

<textarea name="content" id="content" rows="10" cols="40">${banner.content}</textarea>
                <script>
                    // Replace the <textarea id="editor1"> with a CKEditor
                    // instance, using default configuration.
                    CKEDITOR.replace('content');
                </script>
                </td>

ckeditor上传图片的注意点的更多相关文章

  1. Ckeditor上传图片返回的JS直接显示出来,未执行!!!

    Ckeditor上传图片网上有很多教程. 下面是我今天下午遇到的一个坑...自己挖的坑. 在conotroller里 我开始习惯性的 response.setContentType("app ...

  2. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  3. 如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢?

    ckeditor编辑器在上传图片的时候,会神奇的加上一段诡异的代码: 这导致上传的小图也是被拉伸到100%,我根本就没有定义它,找来找去也找不到element.style,原来这是在system.cs ...

  4. django使用ckeditor上传图片

    1.在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开 from ckeditor_uploade ...

  5. 记一次ckeditor上传图片到服务器问题

    package com.util;import java.io.IOException; import java.io.PrintWriter; import java.util.List;impor ...

  6. 使用 CKEditor 上传图片, 粘贴屏幕截图

    之前写过wangEditor,那真是好用,文档也清晰,半天就搞定了,无奈没有对应license,只好选择别的. 外语一般,阅读理解都靠蒙.CKEditor官方文档看的我云里雾里,国内的博客比较少,经过 ...

  7. ckeditor 上传图片解决跨域问题

    前后端分离ckeditor跨域问题处理 这个跨域问题很常见,特别是前后端分离的情况,IP地址不同导致了页面跨域,具体原因大多是因为前端ifame问题 分析 ckeditor插件里config.js需要 ...

  8. CKeditor上传图片 实现所见即所得界面

    迟了好多天的分享,CKeditor这个编辑器虽然不错,但也真苟啊,搞图片上传这个功能,快给我搞佛系了,话不多说,上代码 1.首先去官网下载一个full的版本,我用的是CKeditor 4.13,解压之 ...

  9. CKEditor上传图片—配置CKFinder

    参考:http://blog.csdn.net/gavin710/article/details/8741738

随机推荐

  1. [前端性能提升]--图片转化为base64

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...

  2. [coding horror] 1 - sum 2

    sum 2 描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 对应每个测试案例,输出两个数,小的先输出. codi ...

  3. To the end

    身为一名初二狗的我也走过了半年.不管怎么说人生中也没有几个半年嘛.从九月到现在快四个月了,我也离中考越来越近了/郁闷/.但是还是要好好过唔.不过我想起这半学期还是挺充实的,至少没有浪费太多的时间.有些 ...

  4. oracle_sequence用法

    1.    About Sequences(关于序列) 序列是数据库对象一种.多个用户可以通过序列生成连续的数字以此来实现主键字段的自动.唯一增长,并且一个序列可为多列.多表同时使用.序列消除了串行化 ...

  5. Vim扩展YouCompleteMe插件

    在Vim中安装YouCompleteMe插件 一.安装前的说明: 1.确保vim版本>=7.4,若MAC OS,建议直接安装MacVim(8.0版本). ps:如果不想使用MacVim的GUI, ...

  6. Java中的Class类

    Class 类是在Java语言中定义一个特定类的实现.一个类的定义包含成员变量,成员方法,还有这个类实现的接口,以及这个类的父类.Class类的对象用于表示当前运行的 Java 应用程序中的类和接口. ...

  7. POJ 3414 Pots(BFS)

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Description You are g ...

  8. 寒假学干货之------ 初学者关于fragment_main(碎片的困扰)

    我们在activity_main中编写的框架,会被fragment_main中的取代掉,是因为新版的ADT为了配合平板Android3.0开发 起作用的代码在MainActivity.java中 pa ...

  9. Spring对jdbc支持

    4. Spring对jdbc支持 spring对jdbc提供了很好的支持 体现在: 1.Spring对C3P0连接池的支持很完善 2.Spring对jdbc提供了jdbcTemplate来简化jdbc ...

  10. hive-1.2.1安装步骤

    一.Hive安装和配置 1.先决条件 已经安装好hadoop-2.4.1,hbase-1.0.0. 2.下载Hive安装包 当前Hive可到apache官网下载,选择的是hive-1.2.1.运行: ...