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

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

第一步：如何使用

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

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

<!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="http://自己的服务器地址/ckeditor/ckeditor.js"></script>
</body>
</html>

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 = "<script type=\"text/javascript\">"
resData += "window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + url + "',''" + ")"
resData += "</script>"
return resData

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

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

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

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

富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
富文本编辑器CKEditor配置及使用 - 转载篇
文章目录配置教程配置教程原文地址:富文本编辑器CKEditor配置及使用
ckeditor富文本编辑器的基本配置设置：
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
富文本编辑器CKEditor 5的使用
富文本编辑器CKEditor 5的使用记录了使用CKEditor的过程, 特殊强调,这里使用的是CKEditor5 向网页中添加CKEditor 只是向页面中添加该编辑器不需要什么特殊的操作,遵从以 ...
富文本编辑器CKeditor文件上传下载SmartUpload插件
目录富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
.net下的富文本编辑器FCKeditor的配置方法（图）原创
.net下的富文本编辑器FCKeditor的配置方法(图)原创 FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好. 以前做Java和php的时 ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
Ubuntu 下配置 Typora 图片上传到 smms
Ubuntu 下配置 Typora 图片上传到 smms 首先在这里安装 PicGo,在Typora中的:File / Preferences / Image部分,找到Download and Upg ...

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

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

最新文章

热门文章