介绍
在前端开发中，有很多富文本编辑器可供选择。然而，使用这些富文本编辑器并不容易，因为你需要从头开始设置许多参数和样式。这很浪费时间，而且不利于开发效率的提高。因此，有许多前端开发人员开发了自己的富文本编辑器，并将其打包成 npm 包。
CKEditor5 是一款强大的富文本编辑器，它拥有强大的功能和灵活的扩展性，可以让你快速打造自己的富文本编辑器。@ckeditor/ckeditor5-react 就是 CKEditor5 的一个 React 封装，可以帮助你轻松地在 React 项目中使用 CKEditor5。
安装
您可以使用 npm 或 yarn 安装此 npm 包：
npm install --save @ckeditor/ckeditor5-react yarn add @ckeditor/ckeditor5-react
使用
一旦您安装了 @ckeditor/ckeditor5-react 包，就可以在 React 项目中使用它了。
下面是一个简单的示例，用于显示 CKEditor5 编辑器：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- ------------------------------------
------ -------- ---- ----------------------------
-------- ----- -
----- ------ -------- - -------------
------ -
---- ----------------
------------- ----- -------
---------
----------------------
-----------
----------------- ------- -- -
----- ---- - -----------------
--------------
--
--
------
--
-
------ ------- ----在这个例子中，我们首先从 @ckeditor/ckeditor5-build-classic 包中导入 CKEditor。然后，我们将其作为参数传递给 CKEditor 组件，并将其放在一个名为 editor 的属性中。然后，我们将数据和 onchange 事件传递给 CKEditor。这个 onchange 事件会在编辑器中的数据发生变化时触发，并将新数据设置为状态中的数据。
初始化
CKEditor5 编辑器的初始化非常灵活，可以根据项目的需要进行设置。下面是一些您可能需要了解的选项：
自定义构建
CKEditor5 允许您构建自己的编辑器。有许多模块和插件可供选择。您可以通过传递选择器和其他选项来使用不同的构建版本。以下是一个例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- -----------------------------------------------
------ -------- ---- ----------------------------
-------- ----- -
----- ------ -------- - -------------
------ -
---- ----------------
------------- ----- -------
---------
------------------------
---------------- -- -
-- -------
----------------------------------------------------------
-------------------------------
------------------------------
--
--
----------------- ------- -- -
----- ---- - -----------------
--------------
--
--
------
--
-
------ ------- ----在这个例子中，我们从 @ckeditor/ckeditor5-build-decoupled-document 包中导入 CKEditor，并将其作为参数传递给 CKEditor 组件。我们还添加了一个名为 onInit 的属性。onInit 属性是一个回调函数，它在初始化编辑器时触发。在此示例中，我们将编辑器的工具栏添加到编辑区域之前。
自定义配置
CKEditor5 还允许您在编辑器中使用自定义配置。以下是一些常见配置选项：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- ------------------------------------
------ -------- ---- ----------------------------
-------- ----- -
----- ------ -------- - -------------
------ -
---- ----------------
------------- ----- -------
---------
----------------------
---------
-------- -
----------
----
-------
---------
-------
---------------
---------------
-------------
--------------
------------
--
------ -
-------- -
-----------------------
--------------------
-------------------
-----------------
-
--
------ -
--------------- -
--------------
-----------
------------------
------------------
---------------------
-
--
--------- ----
--
-----------
----------------- ------- -- -
----- ---- - -----------------
--------------
--
--
------
--
-
------ ------- ----在这个例子中，我们将一个名为 config 的属性添加到 CKEditor 组件中。config 是一个对象，其中包含编辑器的所有配置选项。这个例子中，我们设置了工具栏的选项，表格和图片的选项，并使用中文作为编辑器语言。
结论
@ckeditor/ckeditor5-react 是一个非常强大的 React 包，可以帮助您在 React 项目中轻松使用 CKEditor5。它具有许多选项和配置，可以帮助您自定义编辑器以满足特定的项目需求。
在使用 CKEditor5 编辑器时，请记住，它是一个功能强大的应用程序，因此需要对其进行适当的配置。我们希望本文可以帮助您开始使用 CKEditor5 编辑器，并为您的项目增加更多的交互性和可定制性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb203b5cbfe1ea061111b