CKFeditor编辑器如何上传图片(PHP)
2017-09-30 本文已影响95人
等会再说
CKFeditor是一款非常不错的web编辑器，本文内容是基于CKFeditor4.7在php做服务端情况下如何进行配置图片的上传保存讲解。
交互示意图
交互示意图
CKFeditor4.7下载地址：https://ckeditor.com/download
可以根据自己需要对编辑器进行定制下载，我这里下载的是标准版。
前端编码
下载ckfeditor后将其放入自己的项目中，然后就可以创建页面使用CKEditor创建我们的编辑器页面了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script type="text/javascript" >
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
试试看一下效果，通过浏览，浏览器中编辑器的效果是这个样子的
效果图-默认
看着按钮太多，需要定制一下，可以根据需要自己定制需要样式的编辑器，通过js配置来进行配置，下面是我进行调整后的配置，看看效果！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="common/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script type="text/javascript" >
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbar:[
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike'] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter'] },
{ name: 'links', items: [ 'Link', 'Unlink'] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table'] },
{ name: 'styles', items: [ 'Format'] },
{ name: 'document', items: [ 'Source'] },
{ name: 'tools', items: [ 'Maximize'] }
],
height:300,
removeDialogTabs:"image:advanced;link:advanced",//移除图片上传插件的高级选项卡
filebrowserImageUploadUrl:"upload.php"//服务端上传地址
} );
</script>
</form>
</body>
</html>
我们再来看一下新的效果！
效果图-清爽版
这样看着是不是简单清爽很多呢，这里使用了图片上传插件。
插件下载地址：https://ckeditor.com/addon/uploadimage
服务端代码
服务端采用php实现图片上传后保存，保存的过程中我们采用上传根目录+“年”+“月”+“日”目录格式存放上传图片，例如：/uploads/images/2017/09/30/
<?php
//file:upload.php
//递归创建目录函数
function mkDirs($dir){
if(!is_dir($dir)){
if(!mkDirs(dirname($dir))){
return false;
}
if(!mkdir($dir,0777)){
return false;
}
}
return true;
}
//获取回调用的方法
$callback = $_REQUEST["CKEditorFuncNum"];
try {
if(isset($_FILES['upload'])) { //上传的图片的信息存在$_FILES['upload']
$exts = array("jpg","bmp","gif","png");
$upload = $_FILES['upload']['name'];
$ext = pathInfo($upload,PATHINFO_EXTENSION);
if(in_array($ext,$exts)){
$uploadPath = "/uploads/images/";
$data_path=date("Y").'/'.date("m").'/'.date("d").'/';
mkDirs("..".$uploadPath.$data_path);
//通过uuid生成新的文件名称
$uuid = str_replace('.','',uniqid("",TRUE)).".".$ext;
$desname = $dRootDir.$uploadPath.$data_path.$uuid;
$url = $gSite['siteDomain'].$uploadPath.$data_path.$uuid;
//保存临时文件到目标文件
$ret = move_uploaded_file($_FILES['upload']['tmp_name'],$desname);
if($ret){
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$url."','');</script>";
}else{
echo "<font color=\"red\"size=\"2\">上传失败</font>";
}
}else{
echo "<font color=\"red\"size=\"2\">*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）</font>";
}
}
}catch (\Exception $e) {
$erro = $e->getMessage();
echo "<script>window.parent.CKEDITOR.tools.callFunction($callback, '', '$error');</script>";
}
?>
好了，服务端文件内容就这么多，是不是很简单呢!😁
前端，后端代码都已具备，我们来实验下效果如何，看截图：
效果图-上传图片
效果图-上传图片后
图片的大小位置可以通过图片编辑器进行编辑，这个使用上还是比较简单方便的。
注意点说明
- 使用了图片上传插件uploadimage，下载地址：https://ckeditor.com/addon/uploadimage。
- 服务端一定要获取$_REQUEST["CKEditorFuncNum"];用于返回时回调。
- 配置图片上传服务端地址filebrowserImageUploadUrl参数内容。
总结
使用起来不复杂，但是要喜欢就需要进一步了解ckeditor的配置说明，这个可以参看ckeditor官方网站。
就写到这里吧！以此记录，仅供参考！
