Silverstripe 3：覆盖 TinyMCE 样式

Question

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

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

你有什么建议可以给我实现这个目标吗？谢谢

Answer 1

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

TinyMCE 样式（可能不是你要找的，但为了记录）

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

# 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 中添加缩略图并在其上添加播放按钮，然后将该图像设为视频的 link。然后当用户点击它时，在弹出窗口或新标签页中打开真正的 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）然后显示在文本旁边的前端。

Silverstripe 3：覆盖 TinyMCE 样式

Silverstripe 3: Override TinyMCE styles

embed

youtube

styles

tinymce

silverstripe