Silverstripe 3：覆盖TinyMCE样式

编程问答 2022-06-09

问题描述

我想将YouTube视频添加到我的站点，可以通过“内容”字段，然后按基于TinyMCE的“插入媒体”按钮来添加。然后要求我提供视频URL，详细信息和尺寸等。

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

您有什么建议可以给我实现吗？ 谢谢

解决方法

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

  1. TinyMCE样式（可能不是您想要的，而是为了记录）

您可以将自己的css文件添加到tinyMCE，该文件将在CMS内加载。这有助于使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);
    }
}
  1. 设置YouTube视频的样式

这些天，YouTube以<iframe>的形式嵌入，这意味着您实际上没有任何将CSS应用于CSS的选择。因此无法以您想要的传统方式进行样式。
但是您可以做四件事，让您有所控制：

A）Google提供了一些有限的选项，您可以将其添加到src的{​​{1}}中以更改视频的样式。例如，如果您添加自动播放= 1且控件= 0：<iframe>
此处记录了所有可用参数：https://developers.google.com/youtube/player_parameters

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

C）您可以使用YouTube JavaScript API https://developers.google.com/youtube/iframe_api_reference。它允许您将命令发送到播放器，如“播放” /“暂停”。这样，您可以将视频嵌入控件= 0，然后创建自己的控件，将命令发送到播放器。您可以按照自己的方式设置自己的控件样式。尽管被警告，但这可能是很多工作要做的安静的事情。

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

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

embedsilverstripestylestinymceyoutubeyoutube