CKEditor快速介绍与入门示例

CKEditor 富文本编辑器

CKEditor 是一款知名的WYSIWYG富文本Web编辑器，WYSIWYG 的全称是what you see is what you get，也就是所见即所得。
富文本是指除了可以在编辑器中输入一般的文本之外，还可以输入带有样式、格式的文本，以及上传文件以及数学公式等功能。
所见即所得则可以这样理解，因为要在Web中显示一些样式，势必要用到一些HTML代码标签或者是CSS样式，对于终端的使用者来说，如果不熟悉相关语言的话，编辑代码就很困难了，所以这类编辑器中输入的内容和最终显示的样式是一样的。目前也有一些比较流行的非所见即所得编辑器，比如大名鼎鼎的MarkDown, 这些编辑器一般都提供了输入和预览两个部分，在编辑器中输入带有代码的内容，在预览窗口查看最终的效果。
CKEditor 历史悠久而且持续在更新和优化，百度也贡献过一个不错的编辑器UEditor，不过自2016年之后就不在更新了。CKEditor 目前的最新版本是CKEditor 5。

CKEditor 5 编辑器类型

考虑不同的使用场景，主要从将工具栏的部分以不同的方式角度考虑，CKEditor 5提供了以下几种类型的编辑器：

Classic editor 经典编辑器，工具栏位于输入框的上方。
Inline editor 内联编辑器，默认不显示工具栏，当输入框获取焦点时，浮动显示工具栏。
Balloon editor 泡泡编辑器
默认不显示工具栏，当选中输入框中的某行时，弹出工具栏
Balloon block editor 泡泡块编辑器
默认不显示工具栏，当选中输入框中的某行时，在左侧有一个小图标块，点击图标时显示编辑器。
Document editor 文档编辑器，
类似Word文档的编辑效果。

CKEditor 5 的下载和安装

相比CKEditor 4版，使用上有一些差别。
CKEditor 5下载的是一个或多个js文件，官方提供了CKEditor 5的4种下载方式，分别是：

CDN , 内容分发网络的方式，也就是引用在线的js 文件
npm , 使用JS包管理的方式，从中央库下载。此方式需要安装Node.js
Online builder, 在线构建，访问官方的在线构建网站，根据需求选择需要的功能进行构建产生构建后的文件下载。
Zip download 压缩包下载。
对于初学者来说，这种方式1和方式4比较合适。

1. CDN

<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>

[version.number] 是具体的版本号
[distribution] 则是不同类型的编辑器，对应上面5 种类型的编辑器，该值分别是：
- classic - 经典编辑器
- inline - 内联编辑器
- balloon - 泡泡编辑器
- balloon-block - 泡泡块编辑器
- decoupled-document - 文档编辑器
  以引用25.0.0版本的经典编辑器为例，代码如下：

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>

2. npm

npm install --save @ckeditor/ckeditor5-build-classic

npm install --save @ckeditor/ckeditor5-build-inline

npm install --save @ckeditor/ckeditor5-build-balloon

npm install --save @ckeditor/ckeditor5-build-balloon-block

npm install --save @ckeditor/ckeditor5-build-decoupled-document

3. Online builder

在线构建的地址是：
https://ckeditor.com/ckeditor-5/online-builder/
以经典编辑器为例，勾选需要功能的页面如下：

4.Zip Download

压缩包下载的地址如下：

https://ckeditor.com/ckeditor-5/download/

该下载页面可以选择不同的编辑器版本，也提供了CDN和npm 的代码块和命令。

快速示例

此处以CDN引用在线js 的方式演示经典编辑器的使用。示例代码如下：

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Classic editor</title><script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>
</head>
<body><h1>Classic editor</h1><div id="editor"><p>This is some sample content.</p></div><script>ClassicEditor.create( document.querySelector( '#editor' ) ).catch( error => {console.error( error );} );</script>
</body>
</html>

定义一个id为editor div
使用 ClassicEditor对象的create方法创建编辑器
catch 方法用于处理异常
这里的代码写法类似表达是的写法，一行代码搞定

在线演示地址：

http://jsrun.net/mzaKp/edit