CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心。
第一步:如何使用?大象装冰箱总共分三步
1.官网下载/ckeditor-4/download/,分别是简易版、标准版、完整版 ,根据自己需求下载即可
2.下载解压后我们得到如下文件,目录如下
3.本地新建一个demo.htm如下,把ckeditor.js引进来,并在浏览器运行Demo.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80"></textarea><script src="./ckeditor/ckeditor.js"></script></body></html>
4.运行效果如下 大功告成!
第二步:如何通过编辑器上传图片到服务器 稍微有点难 可不学
1.找到ckeditor/config.js
config.js修改如下:
CKEDITOR.editorConfig = function( config ){config.filebrowserImageUploadUrl = '/void/imgupload/ckeditorUpload?type=image';};
2.解释一下,这个'/void/imgupload/ckeditorUpload'是自己定义的本地接收图片的接口,你需要写接收保存图片的逻辑
3.重点!!这个接口接受保存完图片怎么反馈呢??答案是:新版本的ckeditor要返回json格式如下:
{"uploaded": 1, //写死的"fileName": filename, //图片名"url": url//上传服务器的图片的url}
旧版本要返回js代码!!!如下:
callback = request.args.get("CKEditorFuncNum")resData = "<script type=\"text/javascript\">"resData += "window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + url + "',''" + ")"resData += "</script>"return resData
解释:url是上传服务器的图片的url callback是要接收get参数,参数名是“CKEditorFuncNum” ,callback一定不能缺
如果还是不懂 就留言吧~