背景色を変更しながらCKEditorの既存の属性をカスタム属性に再利用

Question

背景色を変更すると、CKEditorはインラインスタイルが設定されているspan要素内の選択されたコンテンツをラップします。

私はインタラクティブビデオを作成するアプリケーションがあります：希望する瞬間に再生を止めることができます。この一時停止中に、視聴者はビデオの重要な瞬間にジャンプしたり、クイズに答えることができます。答えが間違っている場合はビデオ、その他はそうです。プレーヤの上にこのインタラクティブレイヤを作成するために、私はCKEditorを使っていくつかのカスタムプラグインを使ってインタラクティブな要素を作成します。

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play">My element</span>

data-player-control属性の値が固定されていない

が（それはプラグインで指定することができます。プラグインの

一つは、カスタム属性data-player-controlでspan要素を作成するために使用されます）、それはビデオの展示を制御するために使用されます。

エディタは要素の背景色を変更するために使用される場合、それは新しいspanの要素のテキストをラップし、どのような結果には：

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play"> 
 
    <span style="background-color:#FF0000">My element</span> 
 
</span>

と、これら2つの入れ子span要素、 2つの異なる背景色は望ましくない。

私は、その結果、インラインスタイルは、既存のspan要素に適用される必要があります。

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play" style="background-color:#FF0000"> 
 
    My element 
 
</span>

はどのようにこれを達成することができますか？

dataFilterまたはhtmlFilterを使用するのは、入力または出力データで実行されるため、CKEditorのインラインインスタンスを入力または既存インスタンスとして実行するため、実行可能な解決策ではありません。変換を使用することは、実際のDOMではなく要素を表すために簡略化されたフォームを使用するため、解決策でもありません。

コンテンツを編集中に使用するコールバック関数はありますか（私の必要に応じてDOMを変更することができます）？

Answer 1

単純な解決策は、エディタインスタンスでchangeイベントをリッスンし、DOMをevent.editor.ui.contentsElement.$で必要に応じて変更することです。

Answer 2

背景色を追加するカスタムスタイル定義を使用できます。 colorButton_backStyleはエディタの設定で設定できます。

は、いくつかのカスタム属性を持つspan要素をオーバーライドするには、使用することができます。

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

そこで、基本的オーバーライドが背景色を適用すると、このような属性を持つスパンがある場合に属性が使用されている - それが交換されます（属性も削除されます）。また、スパンをオーバーライドすると、あなたの属性を持つように

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

：あなたは属性を追加することができます。

1. 他の要素に背景色を適用し、spanもdata-player-control属性を持っています。このソリューションでの問題は、ということです。
2. 背景色を削除すると、スパン全体が削除されます。

---

上記のソリューションは、あなたのニーズに合わないことがあります。たぶん、あなたが解決しようとしている問題に対するさまざまなアプローチがありますか？

HTMLから出力データとしてだけでなく、構造全体を定義したいという質問からわかるように、それは正しいのですか？ネストされたスパンを持つ構造体は、アプリケーション/実装で何が問題になりますか？