ckeditor 上传文件
来源:互联网 发布:全境封锁优化设置 编辑:程序博客网 时间:2024/06/05 20:30
参考:
http://docs.ckeditor.com/#!/guide/dev_file_browser_api
http://docs.ckeditor.com/#!/guide/dev_file_browse_upload
环境:
ckeditor_4.5.10_full
在生成 ckeditor 的时候,像下面那样写:
CKEDITOR.replace('editor1', { filebrowserBrowseUrl: '/Home/SelectImg', filebrowserUploadUrl: '/Home/SetImg' });
那么,当点击这个按钮的时候
会多了两个选项卡
上传选项卡:
以及链接选项卡:
其中 filebrowserBrowseUrl 的值代表图片要上传的地址,
当在上传选项卡上传图片的时候,CKEditor的访问地址会带一些参数,形如:
其中:
CKEditor=editor1 表示 CKEditor 的 id
CKEditorFuncNum=1 表示此次上传事件的唯一标识码,一般是1
http://localhost:53927/Home/SetImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn
上传图片的时候:
图片的 name 值是 upload
当在链接选项卡 点击 浏览服务器 按钮的时候, CKEditor 访问服务器的地址形如:
http://localhost:53927/Home/SelectImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn
同样是带 CKEditorFuncNum 的,通过这个 CKEditorFuncNum 可以方便服务器找出刚刚在上传选项卡上传的图片
点击 浏览服务器 按钮的时候,CKEditor 会以弹窗的形式弹出服务器返回的页面,服务器返回的页面可以参考下面的代码:
<html><head> <meta name="viewport" content="width=device-width" /> <title>选择文件</title></head><body> <div> <button onclick="returnFileUrl()">Select File</button> </div> <script> // Helper function to get parameters from the query string. function getUrlParam(paramName) { var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i'); var match = window.location.search.match(reParam); return (match && match.length > 1) ? match[1] : null; } // Simulate user action of selecting a file to be returned to CKEditor. function returnFileUrl() { var funcNum = getUrlParam('CKEditorFuncNum'); var fileUrl = '/path/to/img.jpg'; window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl); window.close(); } </script></body></html>
其中 callFunction方法 可以把从服务器获取的图片 url 回填到 链接选项卡
0 0
- CKEditor文件上传
- ckeditor文件上传
- ckeditor 上传文件
- ckeditor上传文件
- ckeditor 文件上传
- CKEditor文件上传
- ckeditor 的文件上传功能
- CKEditor,CKFinder实现文件上传
- grails ckeditor上传文件,中文名称乱码解决方法
- ckeditor实现上传图片,flash等文件。
- CKEditor 上传文件后返回的内容
- ckeditor finderphp整合 php实现文件上传
- Yii整合Ckeditor和Ckfinder上传文件
- CKEditor 上传文件后返回的内容
- CKEditor/FCKEditor 使用-集成 CKFinder(上传文件、浏览文件)
- 【CKEditor 】CKEditor 图片的上传
- 【CKEditor 】CKEditor 图片的上传
- [CKEditor那点事儿]使用java开发ckeditor的文件上传功能
- background
- PS抠图小结
- 数据库面试常问的一些基本概念
- Struts2和springmvc区别
- 探究activity自带的一些判断方法
- ckeditor 上传文件
- 基本的Logstash 例子
- c++字符串和整数的转换
- 有限制的最大连续和问题
- typedef和define,const,struct和typedef struct
- 分布式系统、集群的时间同步
- 企业支付宝账号开发接口教程--JAVA-UTF-8
- 关于C语言中输出格式
- Hibernate ORM实现原理简述