ckeditor 下载地址: https://ckeditor.com/ckeditor-4/download/
之前一直使用的kingeditor, 而kingeditor 外观不美观又过于落后,而开始使用ckeditor,本人使用ckeditor4.17.1版本,ckditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 并且预览中有一堆火星文,可以修改相应配置删除它
1.显示图片上传按钮
在ckeditor 目录里,打开 ckeditor/plugins/image/dialogs/image.js 文件, 搜索 Upload 找到这一段 {id:”Upload”,hidden:!0}, 改成 {id:”Upload”,hidden:0},注意某些版本可能是 {id:”Upload”,hidden:true} 可以改成 {id:”Upload”,hidden:false}
2.去除预览里面的英文
ckeditor 4.17.1 版本 在 config.js 里面修改无效
CKEDITOR.replace( 'ckeditor',{ // 图片上传地址 filebrowserImageUploadUrl:'{:url("tools/UploadsImg")}', // 去除预览的英文 image_previewText:' ' });
亲测 有效
截图:
3.实现图片上传功能
<script src="/ckeditor/ckeditor.js"></script> <script> CKEDITOR.replace( 'ckeditor',{ // 图片上传 地址 filebrowserImageUploadUrl:'{:url("tools/UploadsImg")}', // 去除预览里面的英文 image_previewText:' ' }); </script>
上传代码:
public function UploadsImg(){ $file = request()->file('upload'); $result = []; $error = []; if($file != null){ $filename = get_file_uploads(); $info = $file->validate(['size'=>15678,'ext'=>'jpg,png,gif'])->move($filename); if($info){ $result['uploaded'] = 1; $strimg = str_replace('\\','/',$info->getSaveName()); $img = "/uploads/image/".$strimg; $result['fileName'] = $info->getFilename(); $result['url'] = $img; return json($result); }else{ $error['uploaded'] = 0; $error['error']['message'] = '上传失败'; return json($error); } }
注意:ckeditor4.5 以后响应格式为JSON:
成功:
{ "uploaded": 1, "fileName": "foo.jpg", "url": "/files/foo.jpg" }
失败:
{ "uploaded": 0, "error": { "message": "The file is too big." } }
文档:https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
学习了
(#^.^#)