前言
在 web 开发中，一个好的富文本编辑器可以使用户的操作更加轻松，同时也能够使网站更具有交互性。而 @ckeditor/ckeditor5-engine 就是一款优秀的富文本编辑器，本文将详细介绍它的使用方式以及相关的注意事项。
安装
在开始使用之前，我们需要先将其安装到项目中，可以通过以下命令进行安装：
npm install --save @ckeditor/ckeditor5-engine
使用
引入
在项目中引入 @ckeditor/ckeditor5-engine 可以通过以下方式进行：
-- -------------------- ---- ------- ------ ------------- ---- ------------------------------------------------------- ------ ---------- ---- ------------------------------------------------ ------ --------- ---- ---------------------------------------------- ------ ---- ---- -------------------------------------------- ------ ------ ---- ---------------------------------------------- ------ --------- ---- ------------------------------------------------- ------ ------------- ---- ----------------------------------------------------- ------ --------- ---- ------------------------------------------------- ------ ----------- ---- --------------------------------------------------- ------ ------- ---- ------------------------------------------ ------ --------- ---- ---------------------------------------------- ------ ---------- ---- ------------------------------------------------- ------ ---------- ---- ------------------------------------------ ------ -------- ---- ---------------------------------------- ------ --------- ---- ----------------------------------------- ------ ------ ---- ---------------------------------------- ------ ----------- ---- --------------------------------------------- ------ --------- ---- ---------------------------------------------- ------ ----- ---- -------------------------------------- ------ ------------ ---- --------------------------------------------- ------ ---------- ---- ------------------------------------------- ------ ------------ ---- --------------------------------------------- ------ ----------- ---- -------------------------------------------- ------ ---- ---- ------------------------------------ ------ ---- ---- ------------------------------------ ------ ---------- ---- ------------------------------------------------- ------ --------------- ---- ------------------------------------------------------------ ------ ----- ---- -------------------------------------- ------ ------------ ---- --------------------------------------------- ------ ------------------ ---- ---------------------------------------------------- ----- ------ - --------------
初始化
使用 @ckeditor/ckeditor5-engine 首先需要初始化编辑器，使用以下代码进行初始化：
-- -------------------- ---- -------
-------------
------------------------------------------ -
-------- -
-----------
----------
-----
-------
----------
--------------
----------
------------
--------
----------
-----------
-----------
---------
----------
-------
------------
----------
------
-------------
-----------
-------------
------------
-----
-----
-----------
----------------
------
-------------
------------------
--
-------- -
----------
----
-------
---------
------------
----------------
------------
--------------
----
------------
----
-------------
-----------
------------
----
---------
--------------
------------
----
--------------
------------------
------------------
----
--------------
----
-------
-------
-------------
-----------------
-
--
------------ -- -
------------------- --- ------------- --------
--
------------ -- -
---------------------------
---配置
在初始化时，我们可以配置一些相关的参数，例如：
- plugins：富文本编辑器使用的插件。
- toolbar：显示的工具栏。
事件
在使用 @ckeditor/ckeditor5-engine 进行开发时，可能需要监听一些事件，例如：
- blur：焦点移出编辑器。
- focus：焦点进入编辑器。
- change：内容发生改变。
- ready：编辑器已经初始化完成。
示例代码
以下是一个完整示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------------
------- ---------------------------------------------------------------------------
-------
------
------------ ---------
---- ------------------
--------
----- ------------- - ---------------------
-------------
------------------------------------------ -
-------- -
----------
-------
---------
------------
----------------
------------
--------------
-------------
-----------
------------
------------
---------
--------------
------------
--------------
-------------
---------------
---------------
-------
-------
-------------
------------------
--------
---------------
--------------------
--
-------- -
------ -
----------
-------
---------
------------
----------------
------------
--------------
----
-------------
-----------
------------
----
------------
---------
--------------
------------
----
--------------
-------------
---------------
---------------
----
-------
-------
-------------
------------------
----
--------
---------------
----
-------
------
-
--
--------- ----
--
------------ -- -
------------------- --- ------------- --------
--
------------ -- -
---------------------------
---
---------
-------
-------总结
通过本文的介绍，我们了解了 @ckeditor/ckeditor5-engine 的使用方法，从安装、引入、初始化以及配置等方面进行了了解，同时也讲解了相关的事件，并提供了示例代码，希望对读者开发使用富文本编辑器有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f320adf3b0ab45f74a8bd50