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. 网络爬虫深究-初识HTTP和https常识

    网络爬虫专题--HTTP基本原理 URI和URL.URN的关系 超文本 HTTP和HTTPS URI和URL 首先,我们来了解一下URI和URL,URI,即统一资源标志符,URL,即统一资源定位符. ...

  2. Tableau学习step1一Tableau概述

    本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一.Tableau优缺点 优点 ·简单易用,只要是会用 EXCEL,几分钟就可掌握 Tableau的基本用法 急速高效 ·结果美观 ·轻松整合 ...

  3. Dubbo服务如何优雅的校验参数

    一.背景 服务端在向外提供接口服务时,不管是对前端提供HTTP接口,还是面向内部其他服务端提供的RPC接口,常常会面对这样一个问题,就是如何优雅的解决各种接口参数校验问题? 早期大家在做面向前端提供的 ...

  4. JAVA——类与对象

    目录 类与对象 一.类 二.对象 2.1对象的内存布局形式 三.类与对象 3.1如何创建 3.2如何访问属性 3.2类与对象的分配机制 3.2.1Java内存的结构分析 注意事项和细节 类与对象 为什 ...

  5. 矩池云上使用nohup和&让任务后台运行

    1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...

  6. Flutter的强制自我审查

    在<如何做好 Code Review>中我论述过代码审查对于保证代码品质的重要性,最近开始采用Git Hooks的方式为Flutter项目增加提交前的强制自我审查.这样做的好处在于将机械化 ...

  7. CAS 比较并交换

    简介 CAS 的全称为 Compare-And-Swap,他是一条 CPU 并发源语. 他的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的. CAS 并发原语体现在 J ...

  8. laravel7 手机号验证码登陆

    1"设置路由: //展示手机登录页面 Route::get('admin','admin\AdminController@admin'); 2:html页面 <!DOCTYPE HTM ...

  9. 25 面向对象编程 继承概念 代码 快捷键 super注意点

    继承概念 继承的本质是对某一批的抽象,从而实现对现实世界更美好的建模. extends的意思的"扩展".子类是父类的扩展. JAVA中类只有单继承,没有多继承!理解:一个儿子只能有 ...

  10. npm vue路由配置

    npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1)     npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...