在我们日常开发中，富文本编辑器可以说是一个必不可少的工具。而 medium-editor-embed-button 是一个非常好用且方便的 npm 包，可以帮助我们在 medium-editor 编辑器中添加一个嵌入式按钮，让我们可以方便地添加在线媒体资源，例如 YouTube 视频、Vimeo 视频、Soundcloud 音频等等。今天就来为大家介绍一下 medium-editor-embed-button 的使用教程。
安装 medium-editor-embed-button
在使用 medium-editor-embed-button 之前，我们需要先在我们的项目中安装它。使用以下命令进行安装：
npm install medium-editor-embed-button --save
初始化 medium-editor-embed-button
安装完成之后，我们需要在我们的代码中引入 medium-editor-embed-button。在 JavaScript 文件中添加以下代码来初始化 medium-editor-embed-button：
import EmbedButton from 'medium-editor-embed-button';
const editor = new MediumEditor('.editable', {
buttons: ['bold', 'italic', 'underline', 'h2', 'h3', 'quote', 'insertHtml'，'embed'],
extensions: {
embed: new EmbedButton()
}
});以上代码中，我们引入了 EmbedButton，然后初始化了 medium-editor-embed-button。我们在 MediumEditor 的 buttons 属性中，添加了一个 'embed' 按钮，然后在 extensions 属性中，将 EmbedButton 实例添加到 embed 的扩展中。
使用 medium-editor-embed-button
medium-editor-embed-button 的使用非常简单。在 MediumEditor 中，点击“嵌入”按钮，会弹出一个输入框，我们可以在输入框中输入在线资源的 URL，例如 YouTube 的视频链接，我们只需要输入以下链接即可：
https://www.youtube.com/watch?v=dQw4w9WgXcQ
medium-editor-embed-button 会自动将该链接转换为嵌入式媒体资源。我们可以通过以下代码来自定义嵌入式媒体资源的宽度和高度：
-- -------------------- ---- -------
------ ----------- ---- -----------------------------
----- ------ - --- ------------------------- -
-------- -------- --------- ------------ ----- ----- -------- ------------- ---------
----------- -
------ --- -------------
------ ----
------- ---
--
-
---在以上代码中，我们在 EmbedButton 的实例中，自定义了宽度和高度。
示例代码
下面是一份完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----- ------ ------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- -----------------
-------- ---- ---- ---------
------
------- -------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
--------
------ ----------- ---- -----------------------------
----- ------ - --- ------------------------- -
-------- -------- --------- ------------ ----- ----- -------- ------------- ---------
----------- -
------ --- -------------
------ ----
------- ---
--
-
---
---------
-------
-------以上代码中，我们引入了 MediumEditor、Handlebars 和 medium-editor-embed-button，然后初始化了 MediumEditor 和 medium-editor-embed-button，我们可以通过修改示例代码，来实现自己的需求。
总结
在我们的前端开发中，medium-editor-embed-button 是一个十分好用的工具。它可以帮助我们在 MediumEditor 编辑器中添加一个嵌入式按钮，方便我们添加在线媒体资源。在本文中，我们也详细介绍了 medium-editor-embed-button 的使用教程和示例代码，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d281e8991b448d6214