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. 爬虫之Scrapy框架介绍及基础用法

    今日内容概要 爬虫框架之Scrapy 利用该框架爬取博客园 并发编程 今日内容详细 爬虫框架Scrapy 1.什么是框架? 框架类似于房子的结构,框架会提前帮你创建好所有的文件和内部环境 你只需要往对 ...

  2. （第一章第三部分）TensorFlow框架之会话

    系列博客链接: (一)TensorFlow框架介绍:https://www.cnblogs.com/kongweisi/p/11038395.html (二)TensorFlow框架之图与Tensor ...

  3. Linux安装Mysql8.0及SQL分类的补充

    Linux安装Mysql8.0 参考文章:https://blog.csdn.net/qq_38570633/article/details/109257430 参考文献:https://blog.c ...

  4. JZ-050-数组中重复的数字

    数组中重复的数字 题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中 第一个重复的数字. 例 ...

  5. CentOS安装时，软件选择（Software Selection）项介绍

    要指定软件包将被安装,选择软件时选择安装摘要屏幕.包组分为基础环境.这些环境是预先定义的一组具有特定用途的软件包:例如,在虚拟化主机环境中包含的一组所需的系统上运行的虚拟机软件程序包.只有一个软件环境 ...

  6. laravel7 h-ui点改

    html: <td> @if($item->fang_status == 0) <span onclick="changeFangStatus(this,{{$ite ...

  7. 一比一还原axios源码（三）—— 错误处理

    前面的章节我们已经可以正确的处理正确的请求,并且通过处理header.body,以及加入了promise,让我们的代码更像axios了.这一章我们一起来处理ajax请求中的错误. 一.错误处理 首先我 ...

  8. 6月6日 python学习总结 jQuery （三）

    1. 常用事件 1. hover #鼠标悬停监听 2. keydown和keyup #键盘按键 按下/抬起 3. change #监听值的改变 全部输入完失去焦点后 4. focus和blur # 获 ...

  9. 《前端运维》二、Nginx--4代理、负载均衡与其他

    一.代理服务 比较容易理解吧,简单来说.客户端访问服务器并不是直接访问的,而是通过中间代理服务器,代理服务器再去访问服务器.就像一个中转站一样,无论什么,只要从客户端到服务器,你就要通过我. 一)正向 ...

  10. FOC中的电流采样

    电流采样是FOC的基础,具体有电流传感器采样.电阻采样,电阻采样以其简单低成本的应用广泛使用. 电阻法采样有单电阻采样.双电阻采样.三电阻采样. 一． 单电阻采样 单电阻采用分时采样,在一个PWM周期 ...