300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 富文本编辑器CKeditor的基本使用

富文本编辑器CKeditor的基本使用

时间:2022-09-17 00:52:56

相关推荐

富文本编辑器CKeditor的基本使用

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一定不能缺

如果还是不懂 就留言吧~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。