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的配置和图片上传，看完不后悔的更多相关文章

  1. vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  2. 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  3. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  4. 一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛

    富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...

  5. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  6. 富文本编辑器 CKeditor 配置使用+上传图片

    参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置  ...

  7. ckeditor富文本编辑器的基本配置设置：

    原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...

  8. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  9. 富文本编辑器上传图片需要配置js，后台代码

    富文本编辑器上传图片需要配置js,后台代码

随机推荐

  1. Windows运行(Win+R)快速启动所有程序（自定义）

    运行Win+R我们都会用,等同于开始菜单的"运行".注意,只是效果等同, 从速度来看,按win+r比用鼠标要快很多倍.用win+r启动常用程序 最常用的是输入cmd打开命令行或ca ...

  2. COS 音视频实践 ｜ 数据工作流助你播放多清晰度视频

    前言 你是否遇到过这样的场景: 兴致勃勃地观看心爱的视频,正当到了激动人心的高潮部分,却突然因为网速过差被迫陷入"转圈圈"的人生以及社会的大思考中. 又或者是身为网速畅通无阻的vi ...

  3. JZ-042-和为 S 的两个数字

    和为 S 的两个数字 题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 返回值描述: 对应每个测试案例,输出两 ...

  4. laravel7 权限菜单设置简易升缩

    1:数据库填写数据,pid=0为顶级菜单,pid=对应的id为顶级菜单的子菜单 2:laravel7 创建模型并链接对应的表名 <?php namespace App\models; use I ...

  5. php 23种设计模式 - 命令模式

    命令模式 将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 命令模式以松散耦合主题为基础,发送消息.命令和请求,或通过一组处理程序发送 ...

  6. 2、mysql如何控制用户对数据库的访问

    基础理解:通过对用户赋予某些权限就可以控制用户对数据库的访问 更深层次的理解:当mysql对用户赋予某些权限时,mysql底层是如何控制用户对数据库的访问 用户管理和权限管理 (基础理解) 用户管理 ...

  7. IIS短文件猜解

    1.IIS短文件漏洞 Microsoft IIS 短文件/文件夹名称信息泄漏最开始由Vulnerability Research Team(漏洞研究团队)的Soroush Dalili在2010年8月 ...

  8. HashMap 链表和红黑树的转换

    HashMap在jdk1.8之后引入了红黑树的概念,表示若桶中链表元素超过8时,会自动转化成红黑树:若桶中元素小于等于6时,树结构还原成链表形式. 原因: 红黑树的平均查找长度是log(n),长度为8 ...

  9. @Required 注解？

    这个注解表明bean的属性必须在配置的时候设置,通过一个bean定义的显式的属性值或通过自动装配,若@Required注解的bean属性未被设置,容器将抛出BeanInitializationExce ...

  10. Dubbo 支持分布式事务吗？

    目前暂时不支持,可与通过 tcc-transaction 框架实现 介绍:tcc-transaction 是开源的 TCC 补偿性分布式事务框架 Git 地址:https://github.com/c ...