什么是 @ckeditor/ckeditor5-media-embed？
@ckeditor/ckeditor5-media-embed 是一个用于 CKEditor5 的 npm 包，它提供了一种在文章中嵌入多媒体文件的方式。 其中，多媒体文件可以是视频、音频等。
如何安装 @ckeditor/ckeditor5-media-embed？
首先你需要使用 npm 安装 CKEditor5:
npm install @ckeditor/ckeditor5-build-classic
然后安装该模块:
npm install --save @ckeditor/ckeditor5-media-embed
如何在 CKEditor5 中使用 @ckeditor/ckeditor5-media-embed？
- 导入模块
首先，为了在 CKEditor5 中使用 CKEditor5MediaEmbed 插件，你需要在你的应用中导入该模块，假设你的应用是一个 React 应用，在你的 App.js 文件中导入该模块:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic' import CKEditorMediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js'
- 配置 CKEditor5
接下来，你需要在 ClassicEditor 的配置中添加插件：
-- -------------------- ---- -------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------ -----------
--------------
-------- ------------- -
--------- ------ -- -
-------------------------------------------------------- - -------- -- -
------ --- ---------------------
-
- -
-------- -
------------- - ------------------ --
-- -----
- -
--
------
--
-
-这里我们将 @ckeditor/ckeditor5-media-embed 插件添加到了 ClassicEditor 的 extraPlugins 中。
- 在 CKEditor5 中使用 @ckeditor/ckeditor5-media-embed
最后，在编辑器中输入以下代码即可插入媒体文件：
<mediaEmbed url="https://xxxx.mp4" />
完整的使用示例:
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ ------------- ---- -----------------------------------
------ ------------------ ---- ---------------------------------------------------
------ -----------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------ -----------
--------------
-------- ------------- -
--------- ------ -- -
-------------------------------------------------------- - -------- -- -
------ --- ---------------------
-
- -
-------- -
------------- - ------------------ --
-- -----
- -
------------- --- ------- ---------
--
------
--
-
-
-------- --------------------- -
----------- - -------
----------- - -- -- -
------ --- ----------------- ------- -- -
----- ---- - --- -----------
------------------- ------------------
----------------- -----
-------------- -- -
---------------------------
----------------- ---------------
--
------------ -- -
---------------------
--------------
--
--
-
-
------ ------- ----总结
通过本文，我们学习了如何在 CKEditor5 中使用 npm 包 @ckeditor/ckeditor5-media-embed，来方便我们在文章中嵌入多媒体文件，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd3f