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标记中。请注意，此解决方案可以满足我们对HTML5音频/视频标签的一次性需求，但可能不适用于所有人。

首先，我们在音频标签中添加了一个“我的播放器” ID。

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

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

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

在我们的示例中，这种javascript属性插入效果理想。

TinyMCE剥离HTML 5音频标签上的“ controlsList”属性

2 个答案: