富文本编辑器CKeditor的配置和图片上传，看完不后悔

MartinHan 发布于2019-08-23 10:35 / 2110人阅读

摘要：是一款富文本编辑器，本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题，要有耐心。第一步如何使用官网下载，分别是简易版标准版全面版自定义四个选项，下载哪个根据你的诉求来。

CKeditor是一款富文本编辑器，本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题，要有耐心。

第一步：如何使用

1.官网下载https://ckeditor.com/ckeditor...，分别是简易版、标准版、全面版、自定义四个选项，下载哪个根据你的诉求来。

2.下载成功后---->解压得到一个ckeditor文件夹----->把ckeditor文件夹上传到服务器上（或本地的静态服务上）------>本地新建一个demo.htm如下







Document

3.运行demo.html就能看见编辑器了获取编辑器数据用 var data = CKEDITOR.instances.editor1.getData()

第二步：如何通过编辑器上传图片到服务器

1.找到ckeditor/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 = ""
return resData

解释：url是上传服务器的图片的url callback是要接收get参数，参数名是“CKEditorFuncNum” ，callback一定不能缺

补充：ckeditor新版旧版怎么区分呢？旧版在请求的时候url有"CKEditorFuncNum"参数，新版则没有（本人见解，不明白留言解答）

==========================================================

GPU云服务器云服务器富文本编辑器富文本web编辑器编辑器图片上传富文本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96485.html

Ckeditor富文本编辑器

摘要：开发工具与关键技术撰写时间下面我们讲富文本编辑器的使用要使用富文本编辑器，需要在官网中下载插件，下载后会得到一个文件其中包含以下文件，我们主要使用的是文件在页面中使用在页面中标签引用标签是富文本编辑器的操作对象，在需要 ...

cpupro 2021-09-28 09:35 评论0 收藏0
Django搭建个人博客：使用django-ckeditor富文本编辑器

摘要：后面两个编辑器自带，不用单独下载，添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器，还得对代码稍加改动。对于有些不喜欢的人来说，甚至可以连博文都使用提供的富文本编辑器。前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了，你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...

beanlam 2019-07-31 10:11 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0