在 PHP 里 使用 CKEditor 和 CKFinder 插件上传图片.
2012-03-30 18:10
627 查看
1. 下载安装 CKEditor: http://ckeditor.com/ 解压下载到的CKEditor放到网站的路径中即可
2. 下载安装 CKFinder: http://ckfinder.com/download 解压下载到的CKEditor放到与CKEditor同一目录中即可
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在
textarea 的后面。
最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了,兴奋吧。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
</head>
<body>
<form action="b.php" method="post">
<textarea name="editor1">CKEditor Demo</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
// 启用 CKEitor 的上传功能,使用了 CKFinder 插件
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</html>
4. 配置CKFinder进行上传图片,Flash等。
到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录,如uploads,
其路径为/Users/Biao/Sites/php/uploads/
[For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]
b. 找到配置文件第32行,把 function CheckAuthentication() { return false; }
修改成 function CheckAuthentication() { return true; }
c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,
如 $baseUrl = '/~Biao/php/uploads/';
怎么取得这个 URL 呢?其实很简单,在这个uploads文件夹里创建一个简单的path.php文件:
<?php echo $_SERVER["PHP_SELF"] ?>,然后从浏览器里访问,
就可以得到 /~Biao/php/uploads/path.php,
则 uploads 文件夹的URL是 /~Biao/php/uploads/
d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径,
如$baseDir = '/Users/Biao/Sites/php/uploads/';
这是因为resolveUrl($baseUrl)函数不能正常工作。
至此,可以使用 CKEditor 和 CKFinder 上传文件了。
对上面这个小例子中服务器端的b.php代码:
<?php
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。
2. 下载安装 CKFinder: http://ckfinder.com/download 解压下载到的CKEditor放到与CKEditor同一目录中即可
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在
textarea 的后面。
最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了,兴奋吧。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
</head>
<body>
<form action="b.php" method="post">
<textarea name="editor1">CKEditor Demo</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
// 启用 CKEitor 的上传功能,使用了 CKFinder 插件
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</html>
4. 配置CKFinder进行上传图片,Flash等。
到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录,如uploads,
其路径为/Users/Biao/Sites/php/uploads/
[For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]
b. 找到配置文件第32行,把 function CheckAuthentication() { return false; }
修改成 function CheckAuthentication() { return true; }
c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,
如 $baseUrl = '/~Biao/php/uploads/';
怎么取得这个 URL 呢?其实很简单,在这个uploads文件夹里创建一个简单的path.php文件:
<?php echo $_SERVER["PHP_SELF"] ?>,然后从浏览器里访问,
就可以得到 /~Biao/php/uploads/path.php,
则 uploads 文件夹的URL是 /~Biao/php/uploads/
d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径,
如$baseDir = '/Users/Biao/Sites/php/uploads/';
这是因为resolveUrl($baseUrl)函数不能正常工作。
至此,可以使用 CKEditor 和 CKFinder 上传文件了。
对上面这个小例子中服务器端的b.php代码:
<?php
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。
相关文章推荐
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)(转载)
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- ruby -- 进阶学习(五)使用Ckeditor插件上传中文图片
- 在YII项目中使用ckeditor和ckfinder快速部署文本编辑器并实现图片上传
- 详细配置CKEditor 和 CKFinder 插件上传图片
- ckeditor组合ckfinder的配置使用图片上传功能
- 使用localResizeIMG插件上传图片到七牛云返回链接通过PHP进行保存
- PHP中使用CKEditor上传图片
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
- PHP中配置Ckeditor和Ckfinder(实现图片上传)
- ckeditor和ckfinder配合使用上传图片
- ckeditor的简单使用以及多张图片上传插件的制作
- 使用Ckeditor+Ckfinder完成图片上传
- PHP中配置Ckeditor+Ckfinder 完成图片上传
- asp.net使用ckeditor与ckfinder的集成,有上传图片功能
- ASP.NET项目中使用CKEditor +CKFinder 实现上传图片
- django中使用uploadify等php的图片上传插件
- PHP中配置Ckeditor+Ckfinder 完成图片上传
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)
- ASP.NET项目中使用CKEditor +CKFinder 实现上传图片