CKEditor：自定義樣式UL/LI元素

Question

如何定製CKEditor寫入特定標籤的方式？

我在一個小工具中使用CKEditor來幫助我們的編輯團隊使用響應模板生成即時發送的HTML電子郵件。因此，我將內聯樣式應用於元素（而不是使用CSS類）。

我正在爲無序列表實現樣式而苦苦掙扎。我需要將樣式屬性應用於UL和LI元素，但似乎無法通過樣式列表找到方法。

我還沒有找到任何解決方案，我的第一個想法，「有一種風格影響多種元素以不同的方式」，所以我現在想知道如果我可以配置CKEditor，以便每當它寫UL元素，它包括必要的樣式塊和LI元素的同上。

這可能嗎？

Answer 1

可以使用dataProcessor迫使方式的元素是構建：

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'; 
      } 
     } 
    } 
}); 

當ul元素會這樣寫 - 這將有風格list-style: square和li元素將有color: red，因爲它是樣式。

值得注意的是，使用ckeditor的getData()函數或從編輯模式切換到源模式並返回編輯模式時，該值是可用的。

這裏是一個工作的jsfiddle：
https://jsfiddle.net/v6zf2vwm/