首页 > 代码库 > 用CKEDITOR 做自助上传的解决方案2

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

2024-08-15 20:42:44   218人阅读

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="http://www.mamicode.com/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=http://www.mamicode.com/"/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


联系
我们