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

2023-04-09 10:22| 来源: 网络整理| 查看: 265

富文本编辑器CKeditor的配置和图片上传，看完不后悔 nidaye 发布于2019-08-05 14:34 / 1732人阅读

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

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"参数，新版则没有（本人见解，不明白留言解答）

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

专线服务服务器托管富文本编辑器富文本web编辑器编辑器图片上传富文本

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

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

上一篇：使用flex进行网易云音乐界面构建和布局解析（1）下一篇：vue.js图片转Base64上传图片并预览

【本文地址】

公司简介

联系我们