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"]
]
时间： 2024-10-24 09:52:30