富文本编辑器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,后台代码
随机推荐
- adb常用命令大全——查看手机设备信息
查看手机型号 adb shell getprop ro.product.model 查看电池状况 adb shell dumpsys battery 其中 scale 代表最大电量,level 代表当 ...
- Spring源码解析之八finishBeanFactoryInitialization方法即初始化单例bean
Spring源码解析之八finishBeanFactoryInitialization方法即初始化单例bean 七千字长文深刻解读,Spirng中是如何初始化单例bean的,和面试中最常问的Sprin ...
- 基于idea做java程序的本地k8s调试-skaffold（一）
先介绍下本篇文章是基于ideas下开发微服务的场景,大家都知道微服务嘛,一个个微的服务...很多,先不谈调试,要跑起来都费力,可能的原因有: 环境变量的配置,如果多个项目穿插着来,env变量可能废了, ...
- Linux命令，附带意思
1.ls:命令是列出目录内容 2.lsblk:就是列出块设备3.md5sum:就是计算和检验MD5信息签名.4.dd:命令代表了转换和复制文件5.uname显示内核类别, uname -a显示详细信息 ...
- Caffe2源码解析
写在前面 上一篇文章对Caffe2中的core模块进行了简单拆解Caffe2源码解析之core,本篇给出其它模块的拆解,目的是大致了解每个模块的内容和目标,进一步理解Caffe2的整体框架.内容不多, ...
- CF917D题解
题目大意 一张有 \(n\) 个节点的完全图,再给出这张图的一棵生成树,问该图有多少颗生成树和这颗生成树的公共边总共有 \(k\) 条,求助 \(0 \leq k \leq n-1\) 时所有 \(k ...
- VS2022不能使用<bits/stdc++.h>的解决方案
•<bits/stdc++.h>介绍 #include<bits/stdc++.h> 包含了目前 C++ 所包含的所有头文件,又称万能头文件,简直是开挂一般的存在. 你编程 ...
- SQL语句大全，所有的SQL都在这里
转自微信公众号-我是程序汪 一.基础 1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql s ...
- 转-MySQL 数据库误删除后的数据恢复操作说明
在日常运维工作中,对于mysql数据库的备份是至关重要的!数据库对于网站的重要性使得我们对mysql数据的管理不容有失!然后,是人总难免会犯错误,说不定哪天大脑短路了来个误操作把数据库给删除了,怎么办 ...
- Aspect 切面？
AOP核心就是切面,它将多个类的通用行为封装成可重用的模块,该模块含有一组API提供横切功能.比如,一个日志模块可以被称作日志的AOP切面.根据需求的不同,一个应用程序可以有若干切面.在Spring ...