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. ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...

  2. 字符串匹配算法 -- Rabin-Karp 算法

    字符串匹配算法 -- Rabin-Karp 算法 参考资料 1 算法导论 2 lalor 3 记忆碎片 Rabin-karp 算法简介 在实际应用中,Rabin-Karp 算法对字符串匹配问题能较好的 ...

  3. PHP, Python Nginx works together!

    Nginx is so good at delivering requests to many others. Good! Now let's use the nginx upstream modul ...

  4. 记一次解决curl https证书问题

    问题起因 在访问https的网站时,报出Peer's Certificate has expired的错误.如下: [root@localhost ~]# curl https://www.baidu ...

  5. 用indexOf获取字符窜某个字符的所有位置

    indexOf方法可以传两个参数,第二个参数是传位置的参数,利用这点获取所有的位置.例如: var str = "hello world,welcome!"; var arr = ...

  6. 理解git分支-远程分支

    远程分支 远程引用是对远程仓库的引用(指针),包括分支.标签等等. 你可以通过 git ls-remote (remote)来显式地获得远程引用的完整列表,或者通过 git remote show ( ...

  7. Windows平台下的node.js安装

    Windows平台下的node.js安装 直接去nodejs的官网http://nodejs.org/上下载nodejs安装程序,双击安装就可以了 测试安装是否成功: 在命令行输入 node –v 应 ...

  8. .Net程序员学用Oracle系列(6)：表、字段、注释、约束、索引

    <.Net程序员学用Oracle系列:导航目录> 本文大纲 1.表 1.1.创建表 1.2.修改表 & 删除表 2.字段 2.1.添加字段 2.2.修改字段 & 删除字段 ...

  9. 一口一口吃掉Hexo（一）

    如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 这里是我的个人博客网站,点击这里你可以到我的首页瞧瞧.我之前使用的是第三方的博客平台--博客园,点击这里可以看到我的博客 ...

  10. C语言之结构体

    结构体类型 C语言中还有一种类型叫做结构体类型,它是可以保存不同类型数据并且可以把这些不同类型的数据当做一个整体来管理的类型 1).结构体的定义 语法: struct 结构体名{ 成员列表; };   ...