TinyMCE自定义视频插件插入视频时标签属性丢失问题求解

我开发了一款TinyMCE自定义视频插件，可打开视频列表并插入视频，核心需求是保留视频界面的同时移除下载按钮。查阅资料得知，使用controlsList="nodownload"属性可实现该效果，插件代码如下：

tinymce.PluginManager.add("videoPlugin", function (editor, url) {
  editor.ui.registry.addButton("videoPlugin", {
    text: "Videos",
    onAction: function () {
      openVideoDialog();
    },
  });

  function openVideoDialog() {
    console.log(videoList);
    return editor.windowManager.open({
      title: "Videos",
      body: {
        type: "panel",
        items: [
          {
            type: "selectbox",
            name: "video",
            label: "Video",
            items: videoList,
          },
        ],
      },
      buttons: [
        {
          type: "cancel",
          text: "Close",
        },
        {
          type: "submit",
          text: "Insert",
          primary: true,
        },
      ],
      onSubmit: function (api) {
        var data = api.getData();

        editor.insertContent(
          '<video width="560" height="315" src="' +
            data.video +
            '" controls controlsList="nodownload" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></video>'
        );
        api.close();
      },
    });
  }
});

但插入视频后生成的代码是：

<video src="https://storagexyz.com/videos/video.mp4" controls="controls" width="560" height="315"></video>

而非预期包含controlsList、allow等属性的代码。

TinyMCE默认的HTML过滤机制会自动处理不符合其规则的内容：

• controlsList、allow、allowfullscreen不在TinyMCE默认允许的属性列表中，会被直接清理
• 布尔属性controls会被标准化为controls="controls"的写法

修改TinyMCE的初始化配置，明确允许<video>标签保留这些属性：

方法1：配置extended_valid_elements #

在TinyMCE的初始化代码中添加该配置项，指定<video>标签允许的所有属性：

tinymce.init({
  // 其他现有配置...
  extended_valid_elements: 'video[src|width|height|controls|controlsList|allow|allowfullscreen]'
});

方法2：配合custom_elements（适用于TinyMCE 5+） #

如果方法1效果不佳，可以同时添加custom_elements来确保标签不被默认规则处理：

tinymce.init({
  // 其他现有配置...
  custom_elements: 'video',
  extended_valid_elements: 'video[src|width|height|controls|controlsList|allow|allowfullscreen]'
});

可选：保留布尔属性原写法 #

如果希望controls保持controls而非controls="controls"，可以添加额外配置禁用属性标准化：

tinymce.init({
  // 其他现有配置...
  extended_valid_elements: 'video[src|width|height|controls|controlsList|allow|allowfullscreen]',
  keep_styles: true,
  convert_fonts_to_spans: false
});

配置完成后重新插入视频，即可得到包含所有预期属性的HTML代码。

内容的提问来源于stack exchange，提问作者T. de Jong