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

来源:互联网 发布:绿茶软件园源码 编辑:程序博客网 时间:2024/06/16 02:50

业务需要,为了安全性,防止上传文件后生成的链接被恶意用户篡改,造成死链或数据资源泄露……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下文件/图片上传配置更改

0 0
原创粉丝点击