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. 使ie6的漂浮栏滑动右侧滚动条的时候不抖动

    body {_background-attachment: fixed;}html {_background-image: url(about:blank);}

  2. ASP.NET MVC页面UI之联动下拉选择控件（省、市、县联动选择）

    地区选择操作在WEB应用中比较常见的操作,本文在.net mvc3下实现了省市县三级联动选择功能. 本文博客出处:http://www.kwstu.com/ArticleView/admin_2013 ...

  3. Erasure Coding in WAS简单译文

    原文:<Erasure Coding in Windows Azure Storage.pdf>,地址:https://www.usenix.org/system/files/confer ...

  4. (Java 多线程系列)java synchronized详解

    synchronized简介 Java提供了一种内置的锁机制来支持原子性:同步代码块(Synchronized Block).同步代码块包括两部分:一个作为锁对象的引用,一个作为由这个锁保护的代码块. ...

  5. kivy Grid Layout

    http://kivy.org/docs/api-kivy.uix.gridlayout.html?highlight=gridlayout#kivy.uix.gridlayout It's so n ...

  6. listView 分页加载数据

    Android应用 开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页 的形式来展示数据,个人觉得这样会有 ...

  7. 浅析CDN存在的必要性

    CDN行业从出现至今,已经有近20年的历史.但是直到近些年互联网进入超高速发展阶段,CDN才得以得到更广泛的应用和发展.最开始,CDN的主要任务只是简单的内容分发,对于静态内容的加速没有问题.但是随着 ...

  8. Android KeyLogger Demo

    @author: dlive 代码见github: https://github.com/Dliv3/Android-KeyLogger-Demo 前言 之前开发过一个Android的木马,其中Key ...

  9. CI Weekly #11 | 微服务场景下的自动化测试与持续部署

    又一周过去了,最近我们的工程师正在搞一个"大事情" --「[flow.ci](http://flow.ci/?utm_source=bokeyuan&utm_medium= ...

  10. C语言之printf函数

    一  基本用法 格式化控制符:%d %c %ld %lf 意思是:相当于在要输出的语句里面挖了一个坑,也就是在内存中开辟空间,然后再那个坑的位置(也就是开辟好的空间),填上你想要显示的值 printf ...