介绍
@ckeditor/ckeditor5-editor-balloon 是一个编辑器插件，基于 CKEditor 5 开发。它提供了一种基于气球的弹出窗口，可以用于在编辑器中展示当前编辑器的样式或其他信息。
安装
要安装 @ckeditor/ckeditor5-editor-balloon，请运行以下命令：
npm install --save @ckeditor/ckeditor5-editor-balloon
使用
- 首先，在需要使用气球弹出窗口的页面中引入所需的包：
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ckeditor';
- 创建编辑器实例：
-- -------------------- ---- -------
----- ------------- - ----------------------- --------- --
----- ------ - -------------
-------- -------------- -
-- ------
- -
------ ------ -- -
-- --------------
- -
------- ----- -- -
-------------- ----- --
- --- 然后，您需要添加所需的按钮和命令：
-- -------------------- ---- -------
------------------------------- --------------- ------ -- -
----- --------- - --- ----------------- ------ --
-- --- -------- -- --- ------- ------
----------------------- ---------- --- --------------- ------ - --
----------------------- ------- --- ------------ ------ - --
-- ------ ------- ----- --- -------- -----
------------------------- ---------------------- - ---- ----- ---------- - -- -
-- - ------------------- --- --------- -- --------------------------- - -
-------------------- ---------- -
------- ---------------------------- ------------- --
---------- - ------- --
------- - -- -- -- - -
- --
- ---- -
-------------------- --------- --
-
- --
------ ----------
- --- 最后，将气球弹出窗口添加到编辑器中：
-- -------------------- ---- -------
----- ---------------- - --------------------------------
----- -------------- ------- ------- -
-------- - ----- - - -
----- - ------- ------- - - ------------
----- --------- - --------------------------------
-- --- --- ------- --------- -- --- -------- -------- -- ------ - --- ----
------------------------- ------ -- -
----- ------- - --------------------- ---------- - ------ ----- - --
-- - ------------------------------ - -
--------------------- - ------ ----- -- ------------------------------ --
- ---- -
-------------- -------- ------------------------------ --
-
- --
-
-
----- ----------- ------- ------- -
--------- -
----- - ------- ------- - - ------------
----- --------- - --------------------------------
-- --- --- ---- --------- -- --- -------- ----- -- ------ --- -----
------------------------- ------ -- -
----- ---- - --------------------- ------ --
-- - ------------------- - -
--------------- ------------------ - ----- ---- - -- ---- --
-------------------- ----- ----- --
- ---- -
-------------- ----- ------------------------------ --
-
- --
-
--------- -
----- - ------ - - ---------------------
-------------- - ---------
---------- - -------------- - ---- - ------
-
-
------------------------------- --------------- ------ -- -
----- --------- - --- ----------------- ------ --
----------------------- ---------- --- --------------- ------ - --
----------------------- ------- --- ------------ ------ - --
------------------------- ---------------------- - ---- ----- ---------- - -- -
-- - ------------------- --- --------- -- --------------------------- - -
-------------------- ---------- -
------- ---------------------------- ------------- --
---------- - ------- --
------- - -- -- -- - -
- --
- ---- -
-------------------- --------- --
-
- --
------ ----------
- --示例
以下是一个示例，展示如何在 CKEditor 5 中使用 @ckeditor/ckeditor5-editor-balloon 插件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- - - ---------------------------------- ----------
------- ----------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------
-------
------
------------ ---------------------------------- -------
--------- -------------- -----------------------
--------
-------------
-------- ----------------------- --------- - -
------- ----- -- -
-------------- ----- --
- --
---------
-------
-------结论
@ckeditor/ckeditor5-editor-balloon 是一个强大的编辑器插件，能够提供基于气球的弹出窗口，用于在编辑器中展示当前编辑器的样式或其他信息。在 CKEditor 5 中，可以使用它来增强编辑器的功能和视觉效果。希望这篇教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd46