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. 使用PetaPoco结合注入实现业务级事务

    使用PetaPoco结合注入实现业务级事务   PetaPoco是一个轻量级ORM,我的MVC项目中使用它结合Repository模式,依靠Unity的生命周期管理对象,保证请求/线程级别的数据上下文 ...

  2. ios学习笔记（二）之Objective-C类、继承、类别和协议

    二:Objective-C类与继承和协议 在前面已经提过了对象的初始化,这里首先讲的是变量. 2.1 变量 局部变量(内部变量): 局部变量是在方法内作定义说明的,其作用域仅限于方法内,离开方法后使用 ...

  3. 在Visual Studio 2012中使用VMSDK开发领域特定语言1

    在Visual Studio 2012中使用VMSDK开发领域特定语言(一)   前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modelin ...

  4. Mongodb 集群搭建以及常见错误

    Mongodb 集群搭建以及常见错误 1 关于Replica Sets +Sharding(主从复制加分片)搭建,不这详细去说,网上有很多,大部分的例子就三台服务器之间做主从复制,分2个shard,架 ...

  5. Android自定义组合控件内子控件无法显示问题

    今天自定义了一个组合控件,与到了个奇葩问题: 我自定义了一个RelativeLayout,这个layout内有多个子控件.但奇怪的是这些子控件一直显示不出来.调试了一下午,竟然是因为在获取(infla ...

  6. [置顶] 让我爱恨的ThinkPHP Relation

    还记得第一次用ThinkPHP的relation,做了一个关联查询,觉得特别好用.有那么一天尝试着用关联插入,怎么插,都插不进,我插,我擦! 后来在龙哥的指点下算是成功的实践了一次,后来怎么用都不顺, ...

  7. 用Arduino做一个可视化网络威胁级别指示器！

    在当今世界,网络监控器是非常重要的.互联网是个可怕的地方.人们已经采取措施以提高警戒----他们安装了入侵检测系统(IDS)比如SNORT. 通过把可视化部分从电脑中移出来,我们想让它更容易去观察.一 ...

  8. Node.js学习笔记（二）：模块

    模块是 Node.js 应用程序的基本组成部分,文件和模块是一一对应的.一个 Node.js 文件就是一个模块,这个文件可能是 JavaScript 代码.JSON 或者编译过的 C/C++ 扩展. ...

  9. CentOS 7下安装X Window

    1.网上其他人都这么说: yum check-update yum groupinstall "X Window System" ... 但是运行yum groupinstall  ...

  10. mysql java写入时间少14小时

    查看时区: mysql> show variables like '%time_zone%'; +------------------+--------+ | Variable_name | V ...