序

業務需要，為了安全性，防止上傳檔案後生成的連結被惡意使用者篡改，造成死鏈或資料資源洩露……balabala……改

需求描述

實現上傳圖片/檔案後自動關閉圖片/超連結對話方塊
Automatically close image dialog after uploading an image
1、附件上傳點選上傳伺服器不顯示超連結對話方塊，直接顯示在textarea
2、圖片上傳那個按鈕 預覽不動，和附件一樣不在對話方塊裡顯示連結。

分析

步驟一

要實現如上所需功能，絕壁要改CKEditor.config.js的相關配置程式碼

需要檢視一下官方的API以及相關論壇

還是要好好看看jQuery

步驟二

問度娘、谷歌…balabala

步驟三

不停地查詢資料、測試、修改程式碼……

解決方案

通過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();
                }
            };
       }
    }
})