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. LeetCode-015-三数之和

    三数之和 题目描述:给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?请你找出所有和为 0 且不重复的三元组. 注意:答案 ...

  2. Bugku CTF_web5

    1.打开网页,得到信息如下 2.打开hackbar,在body里传入post参数. 3.得到flag如下 4.主要考察以下几点: ->php无论是通过get请求还是post请求得到的数据都是字符 ...

  3. think php 3种验证方式

    方式一:独立验证 // 验证1.独立验证 //验证的规则 $rule = [ 'name' => 'require|max:25', 'username' => 'require', 'p ...

  4. php 23种设计模型 - 策略模式

    介绍 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换,用户还不需要知道其具体的实现 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使 ...

  5. 关于mysql8.0 caching_sha2_password和sha256_password认证方式

    今天开发上线新系统反馈数据库连接有问题.自己分别在命令行下及navicat进行连接发现,发现root用户密码在命令行下可以正常连接,但是新建立的子用户连接不上.于是就换成管理员密码.立即就连接上了.看 ...

  6. Android 12(S) 图形显示系统 - 初识ANativeWindow/Surface/SurfaceControl（七）

    题外话 "行百里者半九十",是说步行一百里路,走过九十里,只能算是走了一半.因为步行越接近目的地,走起来越困难.借指凡事到了接近成功,往往是最吃力.最艰难的时段.劝人做事贵在坚持, ...

  7. LGP6442题解

    和SP13106是双倍经验哦 我们首先发现 \(m=20\),所以一言不合先状压. 然后发现状压了之后我们实际上要求的是有多少个子集按位或的值为全集,相当于求有多少个子集按位与的值为 \(0\).(把 ...

  8. 2.7 C++STL list容器详解

    文章目录 2.7.1 引入 2.7.2代码示例 2.7.3代码运行结果 总结 2.7.1 引入 STL list 容器,又称双向链表容器,即该容器的底层是以双向链表的形式实现的.这意味着,list 容 ...

  9. vue3-异步组件的使用

    我们通常会在实际开发中,将项目进行分包处理,以此加快项目的速度 即使用异步组件 //异步组件,分包处理 import {defineAsyncComponent} from "vue&quo ...

  10. turtle海龟库

    •turtle的使用 #设置窗体大小 startx,starty非必需,默认在屏幕中间 turtle.setup(width,height,startx,starty) #海龟到(x,y)坐标 tur ...