前言
当我们构建 Web 应用时，文字编辑器是不可或缺的一部分。近年来，越来越多的 Web 开发者开始使用富文本编辑器来增强用户体验。而 CKEditor 5 是一个优秀的开源富文本编辑器，让我们能够快速构建出使用各种字体、颜色、大小、样式和排版功能的编辑器。本文将介绍如何使用 NPM 包 @ckeditor/ckeditor5-build-decoupled-document 来快速搭建一个编辑器。
安装和使用
首先，在你的 Web 项目中安装 NPM 包 @ckeditor/ckeditor5-build-decoupled-document:
npm install --save @ckeditor/ckeditor5-build-decoupled-document
在你的 HTML 文件中添加一个编辑器容器：
<div id="editor"></div>
使用以下 JavaScript 代码来初始化编辑器：
-- -------------------- ---- ------- ------ ------------- ---- ----------------------------------------------- ----- ------ - ------------- -------- ----------------------- --------- -- - -------- - ---------- ---- ------- --------- ------- ---- --------------- --------------- ---- ------------ -- -------- - -------- - - ------ ------------ ------ ------------ ------ ---------------------- -- - ------ ----------- ----- ----- ------ -------- --- ------ --------------------- -- - ------ ----------- ----- ----- ------ -------- --- ------ --------------------- - - - - - ------ ------ -- - ------------ ------ -- - - ------- ----- -- - -------------- ----- -- - --上述代码中，
editor对象是一个 CKEditor 实例，它的create方法接受一个要初始化的 DOM 元素，以及一个配置项，你可以根据你的需求来自定义这些配置项。在上述代码中，我们启用了一些工具栏按钮（bold、italic、numberedList、bulletedList 等），并在下拉菜单中添加了副标题级别的选项。
在你的代码中使用
editor.getData()方法获取编辑器中的内容，例如：
const content = editor.getData(); console.log(content);
示例代码
最后，我们提供一份完整能运行的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- - ----- --------- -------- ---------------
-------
------
------------ - ----- --------- -------- ------------
---- ------------------
------- ----------------------
------- ---------------------------------------------------------------------------------------------
--------
----- ------ - ---------------
-------- ----------------------- --------- -- -
-------- - ---------- ---- ------- --------- ------- ---- --------------- --------------- ---- ------------ --
-------- -
-------- -
- ------ ------------ ------ ------------ ------ ---------------------- --
- ------ ----------- ----- ----- ------ -------- --- ------ --------------------- --
- ------ ----------- ----- ----- ------ -------- --- ------ --------------------- -
-
-
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --
-------------------------------------------------------- -- -- -
----- ---- - -----------------
------------------
---
---------
-------
-------以上就是使用 NPM 包 @ckeditor/ckeditor5-build-decoupled-document 的教程。希望这篇文章可以帮助你构建一个漂亮、高效的富文本编辑器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabbeb5cbfe1ea0610837