CKEditor图片上传的PHP实现

来源：互联网发布：ibm蓝云计算平台编辑：程序博客网时间：2024/05/22 01:49

编辑文章是网站后台的常用功能，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的回调idtry {if(isset($_FILES['upload'])) { //上传的图片的信息存在$_FILES['upload']$s = new FileService();$url = $s->uploadImg($_FILES[$name], $folder); //我自己的放置上传图片的逻辑，返回图片放置后的urlecho "<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||'')单引号中的内容全删了，注意别删多了。

1 0