发布于 2015-01-04 02:04:08 | 3149 次阅读 | 评论: 2 | 来源: PHPERZ
这里有新鲜出炉的CKEditor 4 开发人员指南,程序狗速度看过来!
CKEditor网页编辑器
CKEditor 即 FCKEDITOR 。FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor。
本文为大家讲解的是ckeditor 4上传图片功能的配置方法,感兴趣的同学参考下。
CKEditor 即 FCKEDITOR 。FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor。
最新版的ckeditor 4功能上全部以插件的形式存在,很多同学可以以经发现了,老版的ckeditor上传图片功能是集成在ckeditor里的,但新版本的只有一个上传图片的弹出框,并没有实际的上传功能。
想在在ckeditor里实现上传图片的功能,有二种方法,
1,使用ckeditor开发的ckfinder,这是个专门用来管理上传文件的在线文件浏览器
2,通过调用ckeditor给开放的api,自己写上传程序。
本文就以第二种方式向大家介绍
<textarea class="ckeditor" cols="50" rows="5" name="body" id="body"></textarea>
<script>
CKEDITOR.replace( 'body', {
filebrowserImageUploadUrl: '/upload.php',
image_previewText: ' ',
height:"500"
});
</script>
如上代码所示
filebrowserImageUploadUrl就是指定ckeditor的上传表单提交的地址。
而这个upload.php就是你要处理上传文件的地方
$callback = $_GET['CKEditorFuncNum'];
$img = $_FILES['upload'];
if ($img['error']!='0'){
alert("icon上传失败");
}
$extname = explode(".",$img['name']);
$extname = end($extname);
if (!in_array($extname,array("jpg","jpeg","gif","png"))){
alert("只能上传图片格式");
}
$rootpath = dirname(__FILE);
$filepath = "/".time().rand(1000,9999).".".$extname;
if (!is_uploaded_file($img['tmp_name'])){
alert("数据异常");
}
if (!move_uploaded_file($img['tmp_name'],$rootpath.$filepath)){
alert("上传失败");
}
$basehost = "http://img.phperz.com/"
//ckeditor的回调方法
echo "<script type=\"text/javascript\">";
echo "window.parent.CKEDITOR.tools.callFunction(" . $callback . ",'".$basehost.$filepath."','')";
echo "</script>";
如上代码所示,关键点在于上传成功后需要调用ckeditor给的回调方法:window.parent.CKEDITOR.tools.callFunction