SSH+CKeditor下文件/图片上传配置更改

序

业务需要，为了安全性，防止上传文件后生成的链接被恶意用户篡改，造成死链或数据资源泄露……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();
                }
            };
       }
    }
})

原创：SSH+CKeditor下文件/图片上传配置更改