PHP怎么给ckeditor编辑器加上传图片的功能?CKEditor官方演示是有上传图片和浏览服务器文件功能的,但是我们自己下载回来的却没有这两个功能……
其实还需要下载另外一个组件:CKFinder,用它配合CKEditor来实现上传功能。
官方提供了PHP,Asp.Net和Asp三个语言版本的CKFinder
本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能
第一:配置CKEditor(详见下一篇ckeditor的使用)
1. 将下载的ckeditor_4.1.1.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/。
2. 安装配置CKEditor ,可改/admin/ckeditor/ckeditor.js来配置编辑器(详细的配置详见下一篇ckeditor编辑器的配置)
1)用js的方式调用
<html>
<head>
<title>Sample CKEditor Site</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br />
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
2)用PHP的方法引入
<p>Title:</p><input name="subject" type="text" >
<?php
include 'ckeditor/ckeditor.php'; //include ckeditor.php
$ckeditor = new CKEditor;
$ckeditor->editor('content');
?>
<input name="submit" type="submit" value="提交" />
这样既可以使用ckeditor,效果图在附件ckeditor效果图中
第二步,配置CKfinder
CKfinder是官方组件
1. 将下载的ckfinder_php_2.0.1.zip 解压,复制目录下的ckfinder文件夹至编辑器目
录,/admin/ckeditor。
2、加入ckfinder,把ckfinder和ckeditor放在同级目录下。
打开/ckfinder/config.php, 首先设置第一个函数CheckAuthentication(),这个函数需要按照自己的规则写,只要return true的情况才能允许上传文件到服务器的,当然不建议直接写return true,这将导致安全问题。可以采用session来处理比较方便。
config.php这样修改:
function CheckAuthentication()
{
return true;
}
找到”$baseUrl”,这个变量定义了ckfinder文件上传的目录,将值设为 $baseUrl = '/ckfinder/userfiles/';,
文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。
第三:整合,实现图片上传功能
1. 在编辑器页面头部引用ckfinder.js文件,代码如下:
<script type="text/javascript" src="ckeditor/ckfinder/ckfinder.js">
</script>
最后就是使用ckfinder
<script>
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : 'browser/browse.php',
filebrowserUploadUrl : 'uploader/upload.php',
filebrowserImageWindowWidth : '640',
filebrowserImageWindowHeight : '480',
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>
配置完成后既可以实现图片上传,附件中有效果图
参考地址:http://www.111cn.net/phper/php/42156.htm
http://www.cnblogs.com/mrlaker/archive/2012/09/07/2674428.html