CKEditor图片上传的PHP实现

最新推荐文章于 2024-02-19 19:39:27 发布

Mir2

最新推荐文章于 2024-02-19 19:39:27 发布

阅读量6.1k

点赞数 1

分类专栏： php 文章标签： ckeditor 图片 php 文本编辑

本文链接：https://blog.csdn.net/zaqwsx20/article/details/56667302

版权

php 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

编辑文章是网站后台的常用功能，CKEditor是目前流行的富文本编辑器，它使用方便但要做一些配置才能实现上传本地图片到服务器的功能。在参考了一篇java下CKEditor图片上传的博文后，我用PHP实现了CKEditor编辑文章并支持上传本地图片的功能。

从官网http://ckeditor.com/下载CKEditor，根据需要可以选择基本，标准，完整或自定义版，我下载的是CKEditor4.6完整版。

集成CKEditor到自己的页面，代码如下

<html>
<head>
	<title>CKEditor集成</title>
	<script type="text/javascript" src="../lib/ckeditor/ckeditor.js"></script> <!-- 引入ckeditor -->
</head>
<body>
	<textarea id="editor">
	</textarea>
	
	<script>
	//初始化ck编辑器，将它应用到id为editor的元素上
	CKEDITOR.replace('editor', { 
		height: 350 //编辑器配置，这里仅设置高度为350
	});
	</script>
</body>
</html>

浏览器打开页面之后就会看到ck编辑器了，编辑器中有插入图片的功能，默认只能输入图片URL不能本地上传图片，要开启上传功能就需要服务端配合了。

在ck编辑器中配置filebrowserUploadUrl，配置好了之后插入图片窗口将多出一个上传标签，用户可以在这里选择本地图片，点上传后图片将被发送到我们配置的地址上。

<html>
<head>
	<title>CKEditor集成</title>
	<script type="text/javascript" src="../lib/ckeditor/ckeditor.js"></script> <!-- 引入ckeditor -->
</head>
<body>
	<textarea id="editor">
	</textarea>
	
	<script>
	//将id为editor的元素替换为ck编辑器
	CKEDITOR.replace('editor', { 
		height: 350, 
		filebrowserUploadUrl: "/index.php?act=Cms.uploadCkImg", //设置图片上传请求地址
	});
	</script>
</body>
</html>

接着在服务端实现图片上传功能。ck编辑器将图片以'upload'的名字上传，同时还会带上一个CKEditorFuncNum的参数，这个参数用来回调通知编辑器图片上传的结果。

处理步骤是PHP先获取$_FIile['upload']和$_GET['CKEditorFuncNum']，然后将上传的图片放置到服务上，根据上传结果返回一个调用ck的js

其中$cb是之前获取的CKEditorFuncNum，$url是上传成功后访问图片的url，$erro是上传失败时ck需要显示给用户的错误信息

$cb = $_GET['CKEditorFuncNum']; //获得ck的回调id
try {
	if(isset($_FILES['upload'])) { //上传的图片的信息存在$_FILES['upload']
		$s = new FileService();
		$url = $s->uploadImg($_FILES[$name], $folder); //我自己的放置上传图片的逻辑，返回图片放置后的url
		echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '$url', '');</script>" //图片上传成功，通知ck图片的url
	}	
}catch (\Exception $e) {
	$erro = $e->getMessage();
	echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '', '$error');</script>" //图片上传失败，通知ck失败消息
}

至此就可以用CKEditor自如地编辑图文了。

另外默认上传图片预览中有大堆文字可能看着不爽，可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”就能找到这段鸟语了，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

Mir2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CKEditor图片上传的PHP实现

编辑文章是网站后台的常用功能，CKEditor是目前流行的富文本编辑器，它使用方便但要做一些配置才能实现上传本地图片到服务器的功能。在参考了一篇java下CKEditor图片上传实现的博文后，我用PHP实现了CKEditor编辑文章并支持上传本地图片的功能。从官网http://ckeditor.com/下载CKEditor，根据需要可以选择基本，标准，完整或自定义版，我下载的是CKEditor
复制链接

扫一扫