CKEditor 5 是一款用于 Web 的强大且灵活的富文本编辑器。在 CKEditor 5 中，每个编辑器都是通过构建器来创建的，可以选择所需的插件和构建器进行个性化定制。@erniep888/ckeditor5-build-classic 是在 CKEditor 5 构建器种的一种经典构建，包含了大多数常见的富文本编辑器所需要的功能。本文将详细介绍如何使用 npm 包 @erniep888/ckeditor5-build-classic，并提供示例代码以帮助读者快速上手。
步骤一：安装
使用 npm 安装 @erniep888/ckeditor5-build-classic
npm install --save @erniep888/ckeditor5-build-classic
步骤二：引入
使用 import 引入 @erniep888/ckeditor5-build-classic
import ClassicEditor from '@erniep888/ckeditor5-build-classic';
步骤三：初始化
使用以文本区域为目标元素的 CKEditor 5 实例
ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error);
});效果展示
以下为 @erniep888/ckeditor5-build-classic 在网页中的效果展示。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- - --------------
------- -----------------------------------------------------------------------------------
-------
------
------------ - -----------
--------- -------------- -----------------------
--------
-------------------------------------------------------
------------ -- -
------------------- --- ------------- --------
--
------------ -- -
---------------------
---
---------
-------
-------总结
本文详细介绍了如何使用 npm 包 @erniep888/ckeditor5-build-classic，并提供了示例代码。通过本文的学习，读者将了解 CKEditor 5 的构建器和基本使用方法，能够快速上手使用 @erniep888/ckeditor5-build-classic 构建自己的富文本编辑器。我们希望读者从本文中学到有用的知识，并在实践中获得更多的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e26