SSH+CKeditor下文件/图片上传配置更改
来源:互联网 发布:绿茶软件园源码 编辑:程序博客网 时间:2024/06/16 04:24
序
业务需要,为了安全性,防止上传文件后生成的链接被恶意用户篡改,造成死链或数据资源泄露……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
- SSH+CKeditor下文件/图片上传配置更改
- CKEditor标准版添加上传图片和文件
- ckeditor 上传图片配置内容
- struts2+ckeditor配置图片上传
- ckeditor 实现 servlet 图片上传 配置
- C# ckeditor+ckfinder的图片上传配置
- ckeditor和ckfinder配置上传图片
- windows下文件上传
- springMVC 下文件上传
- 【CKEditor 】CKEditor 图片的上传
- 【CKEditor 】CKEditor 图片的上传
- 使用ckeditor上传图片
- ckeditor编辑器上传图片
- ckeditor 图片上传
- CKEditor实现图片上传
- CKEditor上传图片
- ckeditor 图片上传 小记
- ckEditor图片上传实现
- 浏览器友好的变量输出
- 树的最小支配集
- css3: nth-child(n)解析
- Hibernate基础介绍
- 负载均衡 achpace+tomcat+mod_jk
- SSH+CKeditor下文件/图片上传配置更改
- eclipse提示class file editor source not found的解决方法
- 极客学院单线程爬虫py3.x版本
- Spark RDD详解
- LoadRunner的安装与卸载须知
- ViewPager 详解(一)---基本入门
- [QT] SQLite操作
- 面试常问的问题解决
- ~/.bashrc 和 ~/.bash_profile 和 /etc/bashrc 和 /etc/profile 脚本的区别和启动加载顺序