TinyMCE 剥离 "controlsList" 属性 HTML 5 音频标签

Question

在 TinyMCE 编辑器中我想添加一个有效的元素属性，HTML5 音频和视频属性 "controlList"。这是一个实验属性，但在 Chrome 中受支持，我们可以使用它。例如，我们希望以下代码在 TinyMCE 中进行验证：

<p>
    <audio controls="controls" controlsList="nodownload">
        <source src="some.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
    </audio>
</p>

现在 'controlsList="nodownload"' 不被识别和剥离。

Tiny MCE 的文档显示可以使用 tinyMCE.init (https://www.tiny.cloud/docs/configure/content-filtering/#valid_elements) 添加自定义标签和属性。但是我查看了 2sxc 的源代码，我不太清楚在 2sxc 的 TinyMCE 实现中执行此操作的最佳方法。

一种可能性似乎是文件 \dist\sxc-edit\sxc-edit.js (2sxc 9.14) 的第 2045 行。在那里我将标签和属性添加到现有的 validateAlso:

    validateAlso: '@[class]' // allow classes on all elements, 
            + ',i' // allow i elements (allows icon-font tags like <i class="fa fa-...">)
            + ",hr[sxc|guid]" // experimental: allow inline content-blocks
            + ",audio[controlsList]"
            + ",video[controlsList]"

然而，这对我的测试服务器没有产生预期的效果，而且我不喜欢修改源代码的想法，因为我的更改将被我应用的下一个补丁覆盖。

正确的做法是什么？

Answer 1

截至目前，tinyMCE 不可配置。原因是我们正在使用 Angular 7 迁移到 UI 的全新实现，我们不想引入更多迁移功能:)

如果你真的想这样做，我建议你使用输入类型 "string-wysiwyg" 的代码来创建你自己的 - 我们称之为 "string-wysiswyg-withfeatures" 并将其注册为输入类型（有一些关于此的博客）-然后配置您的字段以使用该所见即所得。

Answer 2

这里有一个解决方法，允许将自定义属性添加到 HTML 标记。请注意，此解决方案适用于我们 one-off 需要 HTML5 audio/video 标签，但可能不适用于所有人。

首先我们在音频标签中添加了一个 id "my-player"。

<audio id="my-player" controls="controls">
  <source src="some.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

然后我们添加了一个脚本，该脚本使用 DNN 页面设置 > 高级 > SEO > 页面插入所需的属性 Header 标签：

<script>
$( document ).ready(function() {
$('#my-player').attr("controlsList", "nodownload");
});
</script>

在我们的例子中，这个 javascript 属性插入具有预期的效果。

TinyMCE 剥离 "controlsList" 属性 HTML 5 音频标签

TinyMCE Stripping Out "controlsList" Attribute on HTML 5 Audio Tag

html

tinymce

2sxc