CKEditor 图片上传
可以做如下配置:
CKEDITOR.replace('editor1',{
filebrowserBrowseUrl:'/browser/browse.php',
filebrowserUploadUrl:'/uploader/upload.php'});
It is also possible to set a separate URL for a selected dialog window by using the dialog window name in file browser settings: filebrowserBrowseUrland filebrowserUploadUrl.
CKEDITOR.replace('editor1',{In the example above, the
filebrowserBrowseUrl:'/browser/browse.php',
filebrowserImageBrowseUrl:'/browser/browse.php?type=Images',
filebrowserUploadUrl:'/uploader/upload.php',
filebrowserImageUploadUrl:'/uploader/upload.php?type=Images'});filebrowserBrowseUrlandfilebrowserUploadUrlsettings will be used by default. In the Image Properties dialog window CKEditor will use thefilebrowserImageBrowseUrlandfilebrowserImageUploadUrlconfiguration settings instead.
在image上传中,会使用filebrowserImageUploadUrl; 传递选择的文件:
To send back the file URL from an external file browser, call CKEDITOR.tools.callFunction and passCKEditorFuncNumas the first argument:
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data]);Ifdata(the third argument) is a string, it will be displayed by CKEditor. This parameter is usually used to display an error message if a problem occurs during the file upload. The following code shows how to send back the URL of an uploaded file from the PHP connector:
<?php
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ; // Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = ; echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
完整的上传图片的代码:
在config设置
filebrowserImageUploadUrl: 'uploadImage.php?type=Images',
uploadImage.php代码如下:
<?php
$url = 'images/uploads/'.time()."_".$_FILES['upload']['name']; /*
$move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
*/
//extensive suitability check before doing anything with the file...
if (($_FILES['upload'] == "none") ||(empty($_FILES['upload']['name'])) )
{
$message = "No file uploaded.";
}
else if ($_FILES['upload']["size"] == 0)
{
$message = "The file is of zero length.";
}
else if (($_FILES['upload']["type"] != "image/pjpeg") && ($_FILES['upload']["type"] != "image/jpeg") && ($_FILES['upload']["type"] != "image/png")&&($_FILES['upload']["type"] != "image/gif"))
{
$message = "图片格式必须是jpg/gif/png";
}
else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
{
$message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
}
else {
$message = "";
$move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);
if(!$move)
{
$message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
}
//$url=$url;
} $funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
参考:
http://www.caeus.com/articles/how-to-add-and-upload-an-image-using-ckeditor/
http://www.phpzixue.cn/detail847.shtml
http://blog.csdn.net/xiao__gui/article/details/7684505
http://codeigniter.org.cn/forums/thread-13708-1-1.html
CKEditor 图片上传的更多相关文章
- springMVC和ckeditor图片上传
springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...
- 简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...
- .net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...
- CKEditor图片上传实现详细步骤(使用Struts 2)
本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. ...
- CKEditor图片上传问题(默认安装情况下编辑器无法处理图片),通过Base64编码字符串解决
准备做一个文章内容网站,网页编辑器采用CKEditor,第一次用,默认安装情况下,图片无法插入,提示没有定义上传适配器(adapter),错误码提示如下: 根据提示,在官网看到有两种途径:一使用CKE ...
- C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”
重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...
- ckeditor图片上传二三事
最近实验室要用ckeditor,踩了几个小坑记录下. 1.出现iframe跨域问题 response.setHeader("X-Frame-Options", "SAME ...
- 使用struts2完成ckeditor和图片上传
代码地址如下:http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor_ ...
- WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION 图片上传
CKEDITOR 编辑器 图片上传 WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION (CKEditorFuncNum,图片路径,返回信息); CKEditor ...
随机推荐
- SQL学习之使用常用函数处理数据
一.在介绍使用函数处理数据前,先说下使用DBMS(数据库管理系统)处理数据所带来的问题! 1.与几乎所有的DBMS都同等的支持SQL语句(如SELECT)不同,每一个DBMS都有特定的函数,事实上,只 ...
- 使用weight属性实现视图的居中显示
有的时候我们开发一个产品的时候需要让其中某个控件的宽度或高度占据其父容器的宽度或高度的一半显示,这个时候由于设备尺寸的限制,做到在每个设备上都具有同样的效果的话,我们就需要用到weightSum属性和 ...
- UISearchBar--改变内部输入框的背景颜色
思路是获取UISearchBar的子视图,判断他是否是输入框(注意不要先入为主地认为是UITextField),最后修改背景色.至于UISearchBar的子视图结构,在不同的iOS版本可能会不一样, ...
- 浅谈Spring(一)
一.Spring引言 Spring是一款轻量级框架,代码入侵量很小,并且还是众多优秀的设计模式的组合(工厂.代理.模板.策略). 特点: 1.方便解耦,简化开发 通过Spring提供的IoC容器,我们 ...
- HDU OJ 5317 RGCDQ( 2015多校联合训练第3场) 暴力打表+小技巧
题目连接:Click here 题意:在一个[L,R]内找到最大的gcd(f[i],f[j])其中L<=i<j<=R,f[x]表示i分解质因数后因子的种类数.eg:f[10]=2(1 ...
- HBase API详解
一.Java API和HBase数据模型的关系 在Java中,与HBase数据库存储管理相关的类包括HBaseAdmin.HBaseConfiguration.HTable.HTableDescrip ...
- html5 canvas 运行起来绝对让你震撼!
从一个大神那看到的,拷贝过来跟大家分享下! html <canvas></canvas> *{margin:0;padding:0;}body{background:#222; ...
- Win7下使用protel99se、protel99
很多网友需要用的protel99se,由于该软件开发的时间比较就早,在现在笔记本普及,尤其是win7普及的情况下,用该软件着实让许多人头痛,有人选择安装XP系统,但这就牺牲了win7良好的操作体验.也 ...
- Jmeter 笔记
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...
- 部署nginx+rsyslog补丁
nginx 配置: user nginx; worker_processes 1; syslog local5 nginx; error_log /var/log/nginx/nginx_error. ...