富文本编辑器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的配置和图片上传，看完不后悔的更多相关文章
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
- 一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛
富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- ckeditor富文本编辑器的基本配置设置：
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 富文本编辑器上传图片需要配置js，后台代码
富文本编辑器上传图片需要配置js,后台代码
随机推荐
- 【译】.NET 7 预览版 1 中的 ASP.NET Core 更新
原文 | Daniel Roth 翻译 | 郑子铭 .NET 7 预览版 1 现已推出!这是 .NET 下一个主要版本的第一个预览版,其中将包括使用 ASP.NET Core 进行 Web 开发的下一 ...
- Linux CentOS7.X-安装mysql5.7数据库(安装包tar.gz）
一.下载对应版本的mysql 1.官网下载压缩安装包. 进入到mysql官网下载自己对应版本的mysql,下载地址:https://dev.mysql.com/downloads/mysql/5.7. ...
- Linux CentOS7.X-文件操作命令
一.文件新增,touch 1.touch fileName,其中fileName表示文件名称,代表创建一个空文件: 2.touch fn1 fn2 fn3....fnn,其中fn1至fnn表示n个不同 ...
- js数组用法
去面试的时候问到我一个问题,你能说出来多少种数组的方法跟用法,我当时只说出来十一个,回来以后才想起来还有很多种,现在整理一下,没有排名,想起那个写那个 1:forEach 从头遍历数组,没有返回值,有 ...
- LGP3953题解
(口胡) 去年刚学 A_star 的时候以为是板子,上午推了一会儿之后受教了 遇到最短路的题先建最短路 DAG,虽然有0边但是先跑一个 Dijkstra. 然后设 \(d[u]\) 是从 \(1\) ...
- PicGo+Typora配置gitee图床
1 .下载Typora Typora官网地址:https://www.typora.io/#windows 本文使用的Typora版本为 0.11.2 根据自己的要求进行安装即可! 2.下载PicGo ...
- python算法 前缀和
这里有 n 个航班,它们分别从 1 到 n 进行编号.有一份航班预订表 bookings ,表中第 i 条预订记录 bookings[i] = [firsti, lasti, seatsi] 意味着在 ...
- 017tcpflow的简单用法
tcpflow tcpflow是服务器上经常使用的一个小程序,它能够捕获tcp的数据流,并将其存储为方便分析和调试的格式.每一条tcp流都会被存储到独立的文件中,因此,典型的tcp流将会被分别存储为进 ...
- 除了增删改查你对MySQL还了解多少？
目录 除了增删改查你对MySQL还了解多少? MySQL授权远程连接 创建用户.授权 客户端与服务器连接的过程 TCP/IP 命名管道和共享内存 Unix域套接字文件 查询优化 MySQL中走与不走索 ...
- select、poll和epoll的区别
操作系统在处理io的时候,主要有两个阶段: 等待数据传到io设备 io设备将数据复制到user space 我们一般将上述过程简化理解为: 等到数据传到kernel内核space kernel内核区域 ...