ckeditor5-基础使用
最近在找一个富文本编辑器，找来找去，不是太丑，就是太过于陈旧，不利于在vue或者其他js前端框架中移植。不过还好最终找到了ckeditor5，颜值和功能都很让我满意，比较恶心的就是文档只有英文的，而且整个api的文档，根本不知道该看哪。在耗费了一天的功夫看文档以后，我决定还是自己来整理一份速查手册类似的文档，以方便大家如果有使用富文本编辑器的需要，也可以有一个参考。这里是ckeditor5系列文章的第一篇《基础使用》。
其实ckeditor是一个老项目了，但是相对于其他的编辑器，它是一直在保持更新的，目前最新的版本就是ckeditor 5，这里以经典编辑器样式（Classic Editor）来做介绍，其他（Inline, Ballon,Document）与此相同。
一、安装
官方提供三种方式安装：
- CDN
- npm
- zip压缩包下载
1、CDN
CDN结构：<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>
其中的version.number，distribution需要替换成你要使用的版本号和编辑器类型，版本号请到官网查询，编辑器类型可以参照下面：
- classic - the Classic editor
- inline - the Inline editor
- balloon - the Balloon editor
- decoupled-document - the Document editor
2、npm
这个没有什么好说，直接执行npm命令即可。
npm install --save @ckeditor/ckeditor5-build-classic
Or:
npm install --save @ckeditor/ckeditor5-build-inline
Or:
npm install --save @ckeditor/ckeditor5-build-balloon
Or:
npm install --save @ckeditor/ckeditor5-build-decoupled-document
3.zip包下载
二、基础使用
快速在自己的网页里放入编辑器还是比较简单的，只需要以下一个步骤：
1、html中添加一个元素用来放编辑器
<textarea name="content" id="editor"></textarea>
2、引入编辑器js，这里使用cdn
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
3、调用ClassicEditor.create方法，来初始化编辑器
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => { console.error( error ); } );
</script>
4、完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea name="content" id="editor">
<p>This is some sample content.</p>
</textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => { console.error( error ); } ); </script>
</body>
</html>
这样，ckeditor5就出现在我们的页面中了～～～
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476862
文章版权归作者所有，转载请保留此声明。