CKEditor：カスタムスタイリングUL/LI要素

Question

CKEditorが特定のタグを書き込む方法をカスタマイズするにはどうすればよいですか？

私は、エディタチームがレスポンシブテンプレートを使用して送信可能なHTMLメールを生成するのに役立つ小さなツールでCKEditorを使用しています。そのため、（CSSクラスを使用するのではなく）要素にインラインスタイルを適用しています。

私は、順序付けされていないリストのスタイルを実装するのに少し苦労しています。私はULとLIの両方の要素にスタイル属性を適用する必要がありますが、私はスタイルのリストからそうする方法を見つけることができないようです。

私は、最初の考え方では、「1つのスタイルが複数の要素にさまざまな形で影響を及ぼしている」という解決策を見つけていないので、今はCKEditorを構成してUL要素を書き込むたびに必要なスタイルブロック、およびLI要素の同上。

これは可能ですか？

Answer 1

あなたは要素が構築されている方法で強制的にdataProcessorを使用することができます。ul要素が書き込まれます。この方法で

dataProcessor.htmlFilter.addRules({ 
    elements: { 
     ul: function(el) { 
      if (!el.attributes.style) { 
       el.attributes['style'] = 'list-style: square'; 
      } 
     }, 
     li: function(el) { 
      if (!el.attributes.style) { 
       el.attributes['style'] = 'color: red'; 
      } 
     } 
    } 
}); 

を - それはだようなスタイルlist-style: squareとli要素がcolor: redを持つことになりますがありますスタイル。

この値は、ckeditorのgetData()機能を使用して、または編集モードからソースモードに切り替えて編集モードに戻ったときに使用できることに注意することが重要です。ここで

作業jsfiddleです：
https://jsfiddle.net/v6zf2vwm/