时间戳

首页 > 解决方案 > TinyMCE Stripping Out "controlsList" Attribute on HTML 5 Audio Tag

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

问题描述

In the TinyMCE editor I want to add a valid element attribute, the HTML5 audio and video attribute "controlList". It's an experimental attribute but supported in Chrome and we have a use for it. For example we want the following code to validate in TinyMCE:

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

Right now 'controlsList="nodownload"' is not recognized and stripped out.

Tiny MCE's documentation shows that adding custom tags and attributes is possible using tinyMCE.init (https://www.tiny.cloud/docs/configure/content-filtering/#valid_elements). However I've looked at the source of 2sxc and I am not quite clear about the best way to do this in 2sxc's implementation of TinyMCE.

One possibility seems to be line 2045 of the file \dist\sxc-edit\sxc-edit.js (2sxc 9.14). There I added the tags & attribute to the existing 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]"

However that didn't have the desired effect on my testing server and I don't love the idea of modifying source since my changes will be overwritten by the next patch I apply.

What is the right way to do this?

标签： htmltinymce2sxc

解决方案

这是一个允许将自定义属性添加到 HTML 标记的解决方法。请注意，此解决方案适用于我们对 HTML5 音频/视频标签的一次性需求，但可能不适用于所有人。

首先，我们在音频标签中添加了一个“my-player”的 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 属性插入具有预期的效果。

推荐阅读