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

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

如果还是不懂就留言吧~

富文本编辑器CKeditor的基本使用相关推荐

富文本编辑器CKEditor配置及使用 - 转载篇
文章目录配置教程配置教程原文地址:富文本编辑器CKEditor配置及使用
富文本编辑器CKEditor 5的使用
富文本编辑器CKEditor 5的使用记录了使用CKEditor的过程, 特殊强调,这里使用的是CKEditor5 向网页中添加CKEditor 只是向页面中添加该编辑器不需要什么特殊的操作,遵从以 ...
富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
富文本编辑器CKeditor文件上传下载SmartUpload插件
目录富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
富文本编辑器 CKeditor 配置使用（带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
富文本编辑器CKeditor的配置和图片上传，看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
富文本编辑器ckeditor的使用
Ckeditor下载地址:http://ckeditor.com/download 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <sc ...
富文本编辑器 CKeditor 配置使用
作者:Tyler Ning 出处:http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
checkbox居中 editor_富文本编辑器ckeditor的使用
一.使用方法: 1.在页面中引入ckeditor核心文件ckeditor.js 2.在使用编辑器的地方插入HTML控件如果是ASP.NET环境,也可用服务器端控件注意在控件中加上 class=& ...

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

富文本编辑器CKeditor的基本使用相关推荐

最新文章

热门文章