序
业务需要,为了安全性,防止上传文件后生成的链接被恶意用户篡改,造成死链或数据资源泄露……balabala……改
需求描述
实现上传图片/文件后自动关闭图片/超链接对话框
Automatically close image dialog after uploading an image
1、附件上传点击上传服务器不显示超链接对话框,直接显示在textarea
2、图片上传那个按钮 预览不动,和附件一样不在对话框里显示链接。
分析
-
步骤一
- 要实现如上所需功能,绝壁要改CKEditor.config.js的相关配置代码
- 需要查看一下官方的API以及相关论坛
- 还是要好好看看jQuery 步骤二
- 问度娘、谷歌…balabala
- 在 segmentfault上和 [CKEditor的官方论坛][6]里得到不少的帮助 步骤三
- 不停地查询资料、测试、修改代码……
解决方案
通过ckeditor内置的语法,hidePage、或者removeContents……
其实最后还是使用了最基本的html+js,通过jQuery找到对应的input,然后设置input的属性readonly="true"。。。
代码
//PS: 这段js代码放在初始化的地方
//初始化CKEditor控件1
$('#'+MENU_CODE+'_fyxjz').ckeditor();
//定义已存在的对话框
CKEDITOR.on('dialogDefinition', function(ev) {
//从事件中获取对话框的名称和定义
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
//CKEditor默认对话框有image、link、flash
if(dialogName == 'image') {
dialogDefinition.onLoad = function () {
var dialog = CKEDITOR.dialog.getCurrent();
//url链接编辑框
$("td.cke_dialog_ui_hbox_first:first input.cke_dialog_ui_input_text").attr("readonly","true");
// show upload tab
this.selectPage('Upload');
// optional:
dialog.hidePage( 'Link' );
dialog.hidePage( 'advanced' );
var uploadTab = dialogDefinition.getContents('Upload');
var uploadButton = uploadTab.get('uploadButton');
uploadButton['filebrowser']['onSelect'] = function( fileUrl, errorMessage ) {
dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
$(".cke_dialog_ui_button_ok span").click();
}
};
}
//超链接,即文件上传
if(dialogName == 'link') {
dialogDefinition.onLoad = function () {
var dialog = CKEDITOR.dialog.getCurrent();
//url链接编辑框
$("td.cke_dialog_ui_hbox_last input.cke_dialog_ui_input_text").attr("readonly","true");
dialogDefinition.onShow = function () {
var uploadTab = dialogDefinition.getContents( 'upload' );
var uploadButton = uploadTab.get('uploadButton');
uploadButton['filebrowser']['onSelect'] = function( fileUrl, errorMessage ) {
dialog.getContentElement('info', 'url' ).setValue(fileUrl);
// $("input.cke_dialog_ui_input_text").val(fileUrl);
$(".cke_dialog_ui_button_ok span").click();
}
};
}
}
})