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下文件/图片上传配置更改