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. cocos2d-x C++的do...while(0)另类使用方法

    在C++中,有三种类型的循环语句:for, while, 和do...while, 但是在一般应用中作循环时, 我们可能用for和while要多一些,do...while相对不受重视.      但是 ...

  2. 老鸟都应该注意的git 提交规范

    不知道大家有没有看过自己项目的git 提交信息-----我看过好多次 ,不忍直视  然后提醒一起的小伙伴 :大家规范点 信息要详细, 过段时间再看下 ,还是一样. 相信很多猿都有这样的感受,对于垃圾的 ...

  3. zTree应用实例详讲

    zTree应用实例详讲(1) 因为项目的需要,要创建一棵动态的文件树,此树除了实现异步获取子节点外,还要实现对树节点的增.删.改.查.移动.重命名.批量删除.批量移动. 每一个操作都要和数据库打交道. ...

  4. EventBus实现 - 发布订阅 - XML加载

    EventBus实现 - 发布订阅 - XML加载 受到CQRS的影响,写了个EventBus,能实现发布订阅模式执行event,在DDD模型中,可以使用如下代码触发事件: EventBus bus ...

  5. TensorFlow 入门之手写识别(MNIST) softmax算法

    TensorFlow 入门之手写识别(MNIST) softmax算法 MNIST flyu6 softmax回归 softmax回归算法 TensorFlow实现softmax softmax回归算 ...

  6. Servlet部署描述文件（web.xml）

    最近看了下配置文件(Deployment Descriptor:简称DD),又称部署描述文件,下面详细介绍下该文件的组成和作用: 一.<web-app>有四个属性: 1.xmlns:申明了 ...

  7. 通告机制Notification

    Obj-c的基本通讯原则是对象间的消息传递,这种情况多出现在两个对象之间.但是如果多个对象共同关注一个对象状态的时候呢,当然可以让发生事件的对象向所有关注他的对象发送消息,但是这并不高效.所以有了通告 ...

  8. 前端：JS获取单击按钮单元格所在行的信息

    在操作表格前后端交互式时,总会遇到将所要操作的行的信息传至后台进行数据库更新的操作,本文适用于标准的html页面和js库,并提出了三种操作方式根据实际情况进行选择 1.表格格式如图所示 2.表格代码如 ...

  9. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  10. XAF-UI元素概述

    XAF框架会根据业务模型自动生成默认的UI.一般来说,您可以使用默认的用户界面,但如果它不符合您的要求,您可以自定义它.要做到这一点,你应该知道UI是由哪些元素组成的,以及你可以自定义什么元素,以实现 ...