用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"]
]
