用CKEDITOR 做自助上传的解决方案2-优快云博客

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,做那个上传页面,

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title></title>
 6 
 7     <script type="text/javascript" src="/res/js/jquery-1.12.1.js"></script>
 8 
 9 
10 </head>
11 <body>
12 
13 <img id="imgs">fuck</img>
14 
15 
16 <script type="text/javascript">
17     parent.fff =("fsdafsdafsdafsda");
　　　　//关键,可以在...被调用
18 
19    var a =$(window.parent.document).find("#title").val("================");
20 
21 </script>
22 </body>
23 
24 </html>

config.extraPlugins += 'multiimg';

自定义按钮

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

转载于:https://www.cnblogs.com/aliblogs/p/5935349.html