前言：
今天咱们对“ckeditorcss”可能比较注重，兄弟们都想要学习一些“ckeditorcss”的相关知识。那么小编在网摘上汇集了一些关于“ckeditorcss””的相关文章，希望咱们能喜欢，大家快快来学习一下吧！最近在找一个富文本编辑器，找来找去，不是太丑，就是太过于陈旧，不利于在vue或者其他js前端框架中移植。不过还好最终找到了ckeditor5，颜值和功能都很让我满意，比较恶心的就是文档只有英文的，而且整个api的文档，根本不知道该看哪。在耗费了一天的功夫看文档以后，我决定还是自己来整理一份速查手册类似的文档，以方便大家如果有使用富文本编辑器的需要，也可以有一个参考。这里是ckeditor5系列文章的第一篇《基础使用》。
其实ckeditor是一个老项目了，但是相对于其他的编辑器，它是一直在保持更新的，目前最新的版本就是ckeditor 5，这里以经典编辑器样式（Classic Editor）来做介绍，其他（Inline, Ballon,Document）与此相同。
效果截图
一、安装
官方提供三种方式安装：
CDNnpmzip压缩包下载
1、CDN
CDN结构：
<script src="[version.number]/[distribution]/ckeditor.js"></script>
其中的version.number，distribution需要替换成你要使用的版本号和编辑器类型，版本号请到官网查询，编辑器类型可以参照下面：
classic - the Classic editorinline - the Inline editorballoon - the Balloon editordecoupled-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包下载
点击下载ckeditor压缩包
二、基础使用
快速在自己的网页里放入编辑器还是比较简单的，只需要以下一个步骤：
1、html中添加一个元素用来放编辑器
<textarea name="content" id="editor"></textarea>
2、引入编辑器js，这里使用cdn
<script src=""></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=""></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就出现在我们的页面中了～～～
标签： #ckeditorcss #ckeditor4编辑器api
