1,在plugins下新建文件夹 multiimg

2,创建文件plugin.js

(function() {

    CKEDITOR.plugins.add("multiimg", {

        requires: ["dialog"],

        init: function(a) {

            a.addCommand("multiimg", new CKEDITOR.dialogCommand("multiimg"));

            a.ui.addButton("multiimg", {

                label: "批量上传图片",//调用dialog时显示的名称

                command: "multiimg",

                icon: this.path + "g.ico"//在toolbar中的图标

            });

            CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")

        }

    })

})();

　　3,创建一个g.ico  放在multiimg目录下

4,创建dialogs文件夹,创建文件multiimg

(function() {

    CKEDITOR.dialog.add("multiimg",

        function(a) {

            return {

                title: "批量上传图片",

                minWidth: "660px",

                minHeight:"400px",

                contents: [{

                    id: "tab1",

                    label: "",

                    title: "",

                    expand: true,

                    width: "420px",

                    height: "300px",

                    padding: 0,

                    elements: [{

                        type: "html",

                        style: "width:660px;height:400px",

                        html: '<iframe id="uploadFrame" src="/image/image.html?v=' +new Date().getSeconds() + '" frameborder="0"></iframe>'

                    }]

                }],

                onOk: function() {

                    // 拿到對象,這個在iframe里定義

                    var num = window.fff;

                    //点击确定按钮后的操作

                    a.insertHtml("编辑器追加内容"+num);

                },

                onShow: function () {

                    document.getElementById("uploadFrame").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '");

                }

            }

        })

})();

　　

5,做那个上传页面,

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

         "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <title></title>

     <script type="text/javascript" src="/res/js/jquery-1.12.1.js"></script>

 </head>

 <body>

 <img id="imgs">fuck</img>

 <script type="text/javascript">

     parent.fff =("fsdafsdafsdafsda");
　　　　//关键,可以在...被调用

    var a =$(window.parent.document).find("#title").val("================");

 </script>

 </body>

 </html>

 config.extraPlugins += 'multiimg';

自定义按钮

config.toolbar = [
['Source', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo', 'Bold', 'Italic',
"Format","FontSize","TextColor" ,"Link" ,"Unlink","CodeSnippet"]
]

用CKEDITOR 做自助上传的解决方案2的更多相关文章

  1. 用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  2. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  3. ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案

    摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...

  4. （配置）CKEditor+CKFinder+php上传配置，根据年月命名创建文件夹来存放

    CKEditor+CKFinder+php上传配置 新版本的CKEditor只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder.这里主要记录CKFinder上传的一些参数配置,能够成功上 ...

  5. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  6. 关于我使用spring mvc框架做文件上传时遇到的问题

    非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...

  7. 使用FormData数据做图片上传： new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  8. 使用struts2完成ckeditor和图片上传

    代码地址如下:http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor_ ...

  9. 关于plupload组件无法拍照上传的解决方案

    关于plupload组件无法拍照上传的解决方案 其实是由于文件大小的问题 filters: { max_file_size: '2mb',//把这个调大些就可以了 前提是服务器支持 prevent_d ...

随机推荐

  1. IOS开发之路二十一（UIWebView加载本地html）

    挺简单不多说的直接代码: // // ViewController.h // JSAndJson // // Created by WildCat on 13-9-8. // Copyright (c ...

  2. uva 408 Uniform Generator

    Uniform Generator  Computer simulations often require random numbers. One way to generate pseudo-ran ...

  3. Easyui + asp.net MVC 系列教程 完成登录

    Easyui + asp.net MVC 系列教程 第09-17 节 完成登录 高清录制 前面八节 在这里 Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 在接下 ...

  4. 使用js加载图像和setDataXML()加载数据

    使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...

  5. SQL删除重复数据，保留一条

    例如: id           name         value 1               a                 pp 2               a           ...

  6. [修]开启MySQL远程访问权限 允许远程连接

    原文地址:http://www.cnblogs.com/XL-Liang/archive/2012/05/03/2481310.html 这个地址也许更有帮助:http://www.cppblog.c ...

  7. 安装javajava整合Flex

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 这几天在学一个叫Flex的东西,之前也没搞过这一类的东西认为既神秘又生疏,随 ...

  8. 汇编条件判断整理（JCC，CMP/TEST的实现）

    比较的实现 我们知道CMP是比较两个寄存器内容的指令,但这是如何实现的? 当执行到CMP指令的时候会读取这两个寄存器的内容,并加以减法运算,结果本身不保留,并按照结果设置符号位(属算术运算). CMP ...

  9. MyEclipse导入Maven项目pom文件第一行报错，运行Tomcat报Log4j错误--解决方法

    问题描述: 前一段时间电脑第一次导入Maven项目,又是pom文件错,改好后又是运行Tomcat报Log4j错误,一直倒腾了近一个月程序才成功跑起来,太不容易. 也上网查了很长时间,没一个方法能解决我 ...

  10. SqlServer创建数据表描述及列描述信息

    SqlServer创建数据表描述及列描述信息 Intro Q: 为什么要创建描述信息? A: 鼠标悬停在对应表和列上时,会出现描述信息,可以提高工作的效率,借助工具我们根据数据表可以生成Model,可 ...