富文本编辑器CKeditor的配置和图片上传，看完不后悔

时间 2019-12-10

标签文本编辑器 ckeditor 配置图片上传看完后悔繁體版

原文原文链接

CKeditor是一款富文本编辑器，本文将用极为简单的方式介绍一下它的使用和困扰你们好久的图片上传问题，要有耐心。javascript

第一步：如何使用html

1.官网下载https://ckeditor.com/ckeditor...，分别是简易版、标准版、全面版、自定义四个选项，下载哪一个根据你的诉求来。java

2.下载成功后---->解压获得一个ckeditor文件夹----->把ckeditor文件夹上传到服务器上（或本地的静态服务上）------>本地新建一个demo.htm以下json

<!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，原来乱七八糟的全删了，修改以下ui

CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = '/void/imgupload/ckeditorUpload?type=image';
};

2.解释一下，这个'/void/imgupload/ckeditorUpload'是本身定义的本地接收图片的接口，你须要写接收保存图片的逻辑url

3.重点！！这个接口接受保存完图片怎么反馈呢？？答案是：新版本的ckeditor要返回json格式以下：code

{
"uploaded": 1,   //写死的
"fileName": filename,  //图片名
"url": url  //上传服务器的图片的url
}

旧版本要返回js代码！！！以下：htm

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'参数，新版则没有（本人看法，不明白留言解答）

==========================================================