PHP中配置Ckeditor和Ckfinder(实现图片上传)

最新推荐文章于 2021-12-14 15:55:23 发布

KylinBL

最新推荐文章于 2021-12-14 15:55:23 发布

阅读量6k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/kylinbl/article/details/8562965

版权

php 专栏收录该内容

131 篇文章 0 订阅

订阅专栏

CKEditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器，FCKeditor是它的前身。CKEditor不提供文件上传功能，如果要实现上传功能则需要使用CKFinder。

1、下载CKEditor和CFinder

CKEditor下载地址：http://ckeditor.com/download

CKFinder下载地址：http://ckfinder.com/download

本人用的版本：ckeditor 4.0.1+ckfinder 2.3.1

2、解压安装

将CKEditor解压之后，将其中的ckeditor放到网站根目录下

将CKFinder解压之后，将其中的ckfinder放到/ckeditor/下

3、客户端网页代码

包括加载ckeditor.js、加载ckfinder.js、创建CKEditor实例、为CKFinder设置CKEditor。

先要在ckeditor/config.js里面对上传进行配置，加入如下代码：

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http=//ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons, provided by the standard plugins, which we don't
	// need to have in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';
	//下面是增加的配置代码
	config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
	config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
	config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
	config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
	config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
	config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
};

然后在html里加入相应js信息,html代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Replace Textarea by Code — CKEditor Sample</title>
	<meta charset="utf-8">
	<script src="/ckeditor/ckeditor.js"></script><!--引入相关js-->
	<script src="/ckeditor/ckfinder/ckfinder.js"></script>
	<script src="/ckeditor/config.js"></script><!--引入ckeditor配置-->
	<link href="/ckeditor/content.css" rel="stylesheet">
</head>
<body>
	<form action="sample_posteddata.php" method="post">
		<textarea cols="80" id="editor1" name="editor1" rows="10">
		</textarea>
		<script>

			// This call can be placed at any point after the
			// <textarea>, or inside a <head><script> in a
			// window.onload event handler.

			// Replace the <textarea id="editor"> with an CKEditor
			// instance, using default configurations.

			CKEDITOR.replace( 'editor1');

		</script>
		<p>
			<input type="submit" value="Submit">
		</p>
	</form>
</body>
</html>

4、服务器PHP代码

写一个sample_postdata.php用来接收CKEditor传过来的数据，通过客户端网页textarea名字作为字段名来从$_POST中获取。传过来的数据是通过转义了的，所有的',",\前面都加上了反斜杠，所以如果要将数据存数据库，数据不需要再转义。如果要将数据直接当成网页代码显示，则在echo之前需要调用stripslashes将所有的反斜杠去掉。

sample_postdata.php

<?php
    $content=$_POST['editor1'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CKEditor and CKFinder serverside</title>
</head>
<body>
<?php
    echo stripslashes($content);
?>
</body>
</html>

5、实现上传文件功能的其他必要配置

（1）/ckeditor/ckfinder/config.php

将其中的$baseUrl设置为$baseUrl = '/ckeditor/ckfinder/userfiles/';，这个设置的是上传文件的存放位置

将其中CheckAuthentication中的return false;改为return true;，这个是设置上传权限，如果只让授权用户上传文件，那么这里可以通过SESSION做一些处理，比如SESSION里有一个字段表示用户是否是已经登录过，是就return true，否就return false。

function CheckAuthentication(){

return true;
}

（2）/ckeditor/config.js

在CKEDITOR.editorConfig = function( config )函数体中添加一句：

config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';

这里设置CKEditor中能使用的字体，CKEditor默认情况下只有英文的字体。

6、测试与授权提示的去除

测试图片上传，看看是否出现了如下画面，其中红线内的按钮就是上述步骤的成果

（1）去掉图片列表左下角的授权信息方法：

在ckfinder/ckfinder.js查找

var p="\x3c\x64\151\x76\040\143\x6c\141\x73\163\075\x27\166\151\x65\167\040\x74\x6f\157\154\x5f\160\x61\156\x65\x6c\x27\x20\163\164\x79\154\145\075\x27\x70\141\x64\x64\x69\156\x67\072\062\x70\170\073\x64\151\x73\x70\154\x61\x79\072\x62\154\157\143\x6b\040\x21\x69\x6d\x70\157\x72\x74\141\156\164\073\x70\157\x73\151\164\151\x6f\x6e\072\163\x74\x61\x74\151\143\x20\041\x69\155\160\x6f\162\164\x61\x6e\164\073\x63\157\x6c\x6f\x72\x3a\142\154\141\143\153\040\041\x69\155\x70\x6f\x72\164\x61\156\x74\073\142\141\x63\x6b\147\162\x6f\165\156\144\055\x63\x6f\x6c\157\x72\x3a\x77\x68\x69\x74\145\x20\x21\151\155\x70\157\x72\164\x61\156\x74\x3b\x27\076",q="\x3c\x2f\144\x69\x76\076",r=p+"\x54\150\x69\163\040\x69\x73\x20\x74\150\145\x20\x44\105\x4d\x4f\x20\166\145\162\x73\x69\x6f\x6e\x20\157\146\040\x43\x4b\x46\151\156\x64\145\x72\x2e\040\x50\x6c\x65\x61\x73\145\040\x76\x69\x73\x69\x74\x20\164\x68\x65\x20\074\141\040\150\162\145\x66\x3d\047\150\164\x74\160\x3a\057\x2f\x63\153\163\x6f\x75\x72\143\x65\056\143\x6f\x6d\057\x63\x6b\x66\151\156\x64\145\x72\047\040\x74\141\x72\147\145\164\x3d\x27\137\x62\x6c\x61\156\x6b\047\076\x43\x4b\x46\151\156\144\145\162\x20\x77\x65\142\x20\163\151\164\145\074\057\141\076\040\x74\157\x20\x6f\x62\164\x61\x69\x6e\040\x61\040\x76\x61\154\x69\144\x20\154\151\x63\145\x6e\163\x65\056"+q,s=p+"\x43\113\x46\151\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\x70\145\162\040\114\151\x63\145\156\x73\145\x3c\142\x72\x2f\x3e\x4c\151\x63\x65\x6e\163\x65\x64\040\164\157\x3a\040";

替换成：

var p="\x20",q="\x20",r=p+"\x20"+q,s=p+"\x20";

（2）去掉文件列表上方显示的This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license字样

在ckfinder/ckfinder.js查找

if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj)}

改成：
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}

7、示例代码下载

点击下载

听说百度的ueditor也蛮强大的，有时间去研究一下。