在更改背景颜色时使用CKEditor中的自定义属性重用现有跨度

更改背景颜色时，CKEditor会将选定内容包装到设置内联样式的

span

元素中

我有一个创建交互式视频的应用程序：可以在所需的时刻停止播放，在这些暂停中，观看者可以跳到视频的关键时刻，或者回答测验，如果回答错误，则返回到视频的特定点，等等。为了在播放器上面创建这个交互层，我使用带有一些自定义插件的CKEditor来创建交互元素

其中一个插件用于创建具有自定义属性的

数据播放器控件
的
span
元素：


span[数据播放器控制]{
背景色：#3366FF；
颜色：#FFF；
边界半径：10px；
填充：10px；
}
My element
您可以尝试使用用于添加背景色的自定义样式定义。可以在编辑器配置中设置

要使用某些自定义属性替代跨度元素，可以使用：

config.colorButton_backStyle = {
    element: 'span',        
    styles: { 'background-color': '#(color)' },
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};

所以，基本上覆盖属性是在应用背景色时使用的，这样的属性有一个范围-它被替换（但随后属性也被删除）。您可以添加属性：

因此，覆盖范围也具有您的属性。此解决方案的问题在于：

将背景色应用于其他元素时，
span
还将具有
data player control
属性
删除背景色时，整个范围将被删除

上述解决方案可能不适合您的需要。也许有不同的方法来解决您试图解决的问题

正如我从问题中了解到的，您希望HTML在整个过程中都定义了结构（不仅仅是作为输出数据），对吗？嵌套跨距的结构在应用程序/实现中造成了什么问题？
一个简单的解决方案是，在编辑器实例中侦听
更改
事件，然后根据需要修改
事件.editor.ui.contentsElement.$
中的DOM。
您指出的项目实际上是我需要的问题。我编辑了这个问题，提供了更多关于整个画面的背景。
data player control
属性具有其他效果，不应始终应用于使用colorButton插件设置背景颜色的元素。感谢您澄清您的问题，它还可能帮助其他用户解决类似问题。我看到你自己找到了解决办法，这很好；）
config.colorButton_backStyle = {
    element: 'span',
    attributes: { 'data-player-control': 'play' },
    styles: { 'background-color': '#(color)' },
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};