富文本编辑器CKeditor的基本使用

最新推荐文章于 2024-07-16 11:09:05 发布

别把代码当饭吃

最新推荐文章于 2024-07-16 11:09:05 发布

阅读量8.1k

点赞数 1

分类专栏：别把代码当饭吃文章标签： ckeditor editor 富文本编辑器富文本编辑器详细教程

本文链接：https://blog.csdn.net/weixin_38639882/article/details/81329885

版权

别把代码当饭吃专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

第一步：如何使用？大象装冰箱总共分三步

1.官网下载https://ckeditor.com/ckeditor-4/download/，分别是简易版、标准版、完整版，根据自己需求下载即可

2.下载解压后我们得到如下文件，目录如下

3.本地新建一个demo.htm如下，把ckeditor.js引进来，并在浏览器运行Demo.html

<!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="./ckeditor/ckeditor.js"></script>
</body>
</html>

4.运行效果如下大功告成！

第二步：如何通过编辑器上传图片到服务器稍微有点难可不学

1.找到ckeditor/config.js

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一定不能缺

如果还是不懂就留言吧~

别把代码当饭吃

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
5
评论
富文本编辑器CKeditor的基本使用

CKeditor是一款富文本编辑器，本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题，要有耐心。第一步：如何使用1.官网下载https://ckeditor.com/ckeditor-4/download/，分别是简易版、标准版、全面版、自定义四个选项，下载哪个根据你的诉求来。2.下载成功后----&gt;解压得到一个ckeditor文件夹-----&gt;把cked...
复制链接

扫一扫