简介
@ckeditor/ckeditor5-link 是一个用于富文本编辑器 CKEditor 5 的插件，用于在文本中添加链接。
安装
在使用 @ckeditor/ckeditor5-link 之前，您需要安装 CKEditor 5。
npm install --save @ckeditor/ckeditor5-build-classic
接着，您需要安装 @ckeditor/ckeditor5-link。
npm install --save @ckeditor/ckeditor5-link
使用
在 CKEditor 5 中使用 @ckeditor/ckeditor5-link 插件，您需要在 build 方法中添加 Link 插件。在 src/ckeditor.js 文件中，添加以下内容：
-- -------------------- ---- -------
------ ---- ---- ------------------------------------
---------------------------- - -
-- ----- ----------
----
--
--------------------------- - -
-- ----- -----------------
-------- -
-- ----- ------- --------
------ -------- ---------
--
--接着，在您的 React 组件中，将 CKEditor 5 组件引入，并设置 editor 属性为 @ckeditor/ckeditor5-build-classic。
-- -------------------- ---- -------
------ -------- ---- ----------------------------
------ ------------- ---- ------------------------------------
-------- ------------- -
------ -
---------
-------- ------------- -
--------------- -----------
---------- ------- ------- -- -
----- ---- - -----------------
------------ ---- --
- -
--
--
-现在，您已经可以使用 CKEditor 5 的 @ckeditor/ckeditor5-link 插件了。在编辑器中，选择一段文本，点击工具栏上的 link 按钮，即可添加链接。
示例
以下是一个完整的代码示例，演示了如何在 React 应用程序中使用 CKEditor 5，并包含了 @ckeditor/ckeditor5-link 插件的使用。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ----------------------------
------ ------------- ---- ------------------------------------
------ ---- ---- ------------------------------------
-------- ----- -
----- - ----- ------- - - --------- ---------- ----------- --
------ -
---- ----------------
------ -------- - ------------
---------
-------- ------------- -
------ ---- -
---------- - ------ ------ - -- -
----- ------- - -----------------
-------- ------- --
------------ - ------ ------- ----- ------- - --
- -
--------
-
-------- - ---- --
-------- -
------ - ------- --------- ------------ ------- -------- -
-
-
-
--
---
------- --------- -- -- -------- ------------ ----------- - --
------- ----
---------
----
------
--
-
------ ------- ----在代码示例中，我们定义了一个状态 data，用来保存编辑器中的 HTML 内容。在 CKEditor 组件中，我们传入了 ClassicEditor 作为 editor 属性，传入了 data 和 onChange 作为 data 和 onChange 属性，并设置了 plugins 和 toolbar 的配置。当编辑器中的内容发生变化时，我们使用 onChange 属性中的函数来更新 data 状态，并在控制台中打印出事件、编辑器实例和新的数据。
总结
@ckeditor/ckeditor5-link 插件是一个用于 CKEditor 5 的插件，用于在文本中添加链接。在使用插件之前，您需要安装 CKEditor 5 和插件。使用插件时，您需要在 src/ckeditor.js 文件中添加插件，并在 React 组件中使用 CKEditor 组件，并传入 ClassicEditor 作为 editor 属性。在设置 plugins 和 toolbar 的配置后，即可使用 @ckeditor/ckeditor5-link 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd3d