用CKEDITOR 做自助上传的解决方案2

Posted Ali|备份日志

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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"]
]

 

以上是关于用CKEDITOR 做自助上传的解决方案2的主要内容,如果未能解决你的问题,请参考以下文章

CKEditor图片上传问题(默认安装情况下编辑器无法处理图片),通过Base64编码字符串解决

ckeditor5上传的图片如何用PHP接收?

CKEditor 3.6.2 如何开启上传功能 php 的 要有详细的设置或代码哦

使用ng2-ckeditor从本地系统上传图像

CKEditor去掉超链接和高级的方法,及上传和图像对调位置

CKEditor 5 注册多个上传适配器