Silverstripe 3：覆盖 TinyMCE 样式答案

【问题标题】：Silverstripe 3: Override TinyMCE stylesSilverstripe 3：覆盖 TinyMCE 样式
【发布时间】：2021-01-26 06:37:52
【问题描述】：

我想向我的网站添加一个 Youtube 视频，我可以通过“内容”字段执行此操作，然后按基于 TinyMCE 的“插入媒体”按钮。然后它会要求我提供视频 URL、详细信息和尺寸等。

但是，我想为该视频添加一些样式；例如，“播放”按钮使其变为不同的颜色并在按下该按钮时添加一些JS。

您有什么建议可以让我实现这一目标吗？谢谢

【问题讨论】：

标签： youtube styles tinymce embed silverstripe

【解决方案1】：

我将分两部分回答这个问题：

TinyMCE 样式（可能不是您要查找的，但用于记录）

您可以将自己的 css 文件添加到将在 CMS 中加载的 tinyMCE。这有助于使 CMS 中的文本看起来与前端相似（例如标题大小）。
我认为 3.x 中的默认文件是 mysite/css/editor.css，但您也可以覆盖它：
（请注意，此 editor.css 文件仅适用于 TinyMCE 编辑器内部，不适用于您的网站，因此仅适用于内容作者/管理员）

# mysite/_config/config.yml
LeftAndMain:
  extensions:
    - 'MyLeftAndMainExtension'

// mysite/code/MyLeftAndMainExtension.php
class MyLeftAndMainExtension extends \LeftAndMainExtension {
    public function init() {
        parent::init();
        $editorCss = '/mysite/css/some-other-css-file.css';
        // add a ?t=123456 timestamp to bust the cache
        $editorCss .= '?t=' . filemtime(\Director::getAbsFile($editorCss));
        \HtmlEditorConfig::get_active()->setOption('content_css', $editorCss);
    }
}

为 YouTube 视频设置样式

如今，YouTube 嵌入为 <iframe>，这意味着您实际上没有任何选项可以对其应用 CSS。因此，无法以您正在寻找的传统方式进行造型。
但是你可以做 4 件事来获得一点控制权：

A) google 提供了一些有限的选项，您可以将它们添加到<iframe> 的src 以更改视频的样式。例如，如果您添加 autoplay=1 和 controls=0：<iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ?autoplay=1&controls=0">
所有可用参数都记录在这里：https://developers.google.com/youtube/player_parameters

B) 您可以通过不实际嵌入视频来伪造它，而是在 CMS 中添加一个缩略图图像并在其上添加一个播放按钮，并使该图像成为视频的链接。然后当用户点击它时，在弹出窗口或新标签页中打开真正的 YouTube 播放器

C) 您可以使用 YouTube JavaScript API https://developers.google.com/youtube/iframe_api_reference。它允许您向播放器发送命令，例如“播放”/“暂停”。这样，您可以使用 controls=0 嵌入视频，然后创建您自己的控件来向播放器发送命令。您自己的控件可以按照您想要的方式设置样式。尽管被警告过，但这可能需要大量的工作来实现。

D) 与 C) 类似，但更简单，您可以查看是否存在使用 YouTube API 为您执行此操作的现有软件。例如，快速搜索返回https://plyr.io/。也许值得研究

（另请注意，B）和 C）不容易集成到 TinyMCE，我已经完成了这两种方法，但是我为视频添加了额外的 CMS 字段（名为 VideoURL 的 TextField 和名为 VideoPreviewImage 的 ImageField），然后在文本旁边的前端。

【讨论】：