|
|
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( '[size=1em]editor1[size=1em]',
{
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 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-4-4 11:28:56
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡