简介
在 Web 开发中，富文本编辑器的应用非常广泛，其中 TinyMCE 是一款被广泛使用的富文本编辑器。但是，在 TinyMCE 默认集成的插件中，并没有提供视频插入的功能。因此，我们需要使用 @brandextract/tinymce-plugin-video 这个 npm 包来添加视频插入功能。
安装
使用 @brandextract/tinymce-plugin-video 需要先安装它的依赖 Tinymce5：
npm install tinymce@5
然后，再安装 @brandextract/tinymce-plugin-video：
npm install @brandextract/tinymce-plugin-video
使用
在项目中引入 Tinymce5：
<script src="node_modules/tinymce/tinymce.min.js"></script>
在 TinyMCE 的初始化配置中，添加 video 插件：
tinymce.init({
plugins: [
'video'
]
});现在，在 TinyMCE 编辑器中，就可以看到添加视频的按钮了。
但是，如果我们需要为视频添加更多的属性，比如自定义宽度、高度、自动播放等等，我们需要使用 @brandextract/tinymce-plugin-video 提供的组件。
首先，在项目中引入 @brandextract/tinymce-plugin-video：
import '@brandextract/tinymce-plugin-video/dist-plugin/plugin.js';
然后，在 TinyMCE 的初始化配置中，通过插件的 component 属性来添加 @brandextract/tinymce-plugin-video 提供的组件：
-- -------------------- ---- -------
--------------
-------- -
-------
--
-------- --------
-------------------- ---------
------------------------ -------- ------ -
-- -------------- -
------ ----- ------------------------------ --------------------- -- ---- ------------------- -- ---- --------------------- -- ---- --------------------------- --------------------- --------------------------- -------------------- --------- --------------------- --------- ------- ------- ------- ----- ------ ---- -- - -- -------------------------- -- --- --------- ----------------------------
- ---- -
------ ----- ------------------------------ --------------------- -- ---- ------------------- -- ---- --------------------- -- ---- --------------------------- --------------------- --------------------------- -------------------- --------- ------- ------- ------- ----- ------ ---- -- - -- -------------------------- -- --- --------- ----------------------------
-
--
------------ ----------------
-------------- ----- - ---------- ----- ------------ --------------------------- ------------ ---- -------- ---- ---
-------------------- ----------
----------------------- - -------- - ---- --------- --
---在这段配置中，我们使用了 @brandextract/tinymce-plugin-video 提供的属性和方法：
- toolbar：设置 TinyMCE 的工具栏为 video，即默认显示视频插入的按钮；
- default_link_target：设置链接的打开方式为新页面打开；
- video_template_callback：使用 @brandextract/tinymce-plugin-video 的模板渲染方法，对视频信息进行模板渲染；
- content_css、content_style：设置 TinyMCE 的样式；
- video_uploader_type：设置文件上传类型为 adapter，即上传到自己的服务器上；
- video_uploader_options：设置 adapter 的参数，比如上传地址等。
现在，我们已经成功添加了 @brandextract/tinymce-plugin-video 插件，并且为视频添加了更多的属性。
示例代码
-- -------------------- ---- -------
------ -----------------------------------------------------------
--------------
-------- -
-------
--
-------- --------
-------------------- ---------
------------------------ -------- ------ -
-- -------------- -
------ ----- ------------------------------ --------------------- -- ---- ------------------- -- ---- --------------------- -- ---- --------------------------- --------------------- --------------------------- -------------------- --------- --------------------- --------- ------- ------- ------- ----- ------ ---- -- - -- -------------------------- -- --- --------- ----------------------------
- ---- -
------ ----- ------------------------------ --------------------- -- ---- ------------------- -- ---- --------------------- -- ---- --------------------------- --------------------- --------------------------- -------------------- --------- ------- ------- ------- ----- ------ ---- -- - -- -------------------------- -- --- --------- ----------------------------
-
--
------------ ----------------
-------------- ----- - ---------- ----- ------------ --------------------------- ------------ ---- -------- ---- ---
-------------------- ----------
----------------------- - -------- - ---- --------- --
---总结
在本文中，我们介绍了如何使用 @brandextract/tinymce-plugin-video 这个 npm 包来为 TinyMCE 添加视频插入的功能，并且通过插件提供的组件来为视频添加更多属性。希望本文对你有帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec181e8991b448dc838