富文本编辑器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,后台代码
随机推荐
- Dubbo服务如何优雅的校验参数
一.背景 服务端在向外提供接口服务时,不管是对前端提供HTTP接口,还是面向内部其他服务端提供的RPC接口,常常会面对这样一个问题,就是如何优雅的解决各种接口参数校验问题? 早期大家在做面向前端提供的 ...
- [k8s] k8s基于csi使用rbd存储
描述 ceph-csi扩展各种存储类型的卷的管理能力,实现第三方存储ceph的各种操作能力与k8s存储系统的结合.通过 ceph-csi 使用 ceph rbd块设备,它动态地提供rbd以支持 Kub ...
- mysql中MyISAM与InooDB存储引擎的区别
MyISAM存储引擎特点 不支持事务 表级锁定 读写相互阻塞,写入不能读,读时不能写 只缓存索引 不支持外键约束 不支持聚簇索引 读取数据较快,占用资源较少 不支持MVCC(多版本并发控制机制)高并发 ...
- js json.stringfy()和json.parse()的用法
1.JSON.parse;作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)语法:JSON.parse(text [, reviver])text 必选. 一个有效的 J ...
- DataFrame计算corr()函数计算相关系数时，出现返回值为空或NaN的情况+np.log1p()
- SQL语句的使用,SELECT - 从数据库表中获取数据 UPDATE - 更新数据库表中的数据 DELETE - 从数据库表中删除数据 INSERT INTO - 向数据库表中插入数据
SQL DML 和 DDL 可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL). SQL (结构化查询语言)是用于执行查询的语法. 但是 SQL 语言也包含用于更新. ...
- 云原生技术赋能ISV实现应用现代化
日前,由BP商业伙伴主办,中国开源云联盟和云原生应用现代化联盟协办的2021-2022云计算生态峰会成功举办.头部ISV代表.最终用户和云原生技术专家等与会各方围绕"云原生技术赋能ISV&q ...
- 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态
平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...
- JSON.parse()和JSON.stringfy()区别
JSON.parse() 用于从一个json格式字符串解析出json类型的数据,如: 注意事项:json格式字符串必须是写在一排的,且括号外面用单引号,里面的每一个字符串用双引号 JSON.strin ...
- ModelSim10.7安装破解教程
我打算开始学习ZYNQ,所以先安装好工具ModelSim10.7,很无奈的是倒腾了一个上午也没生产license的txt文档和破解成功. 上面是破解失败的截图,下面是生成不了license,点了直接闪 ...