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, как это стиль.

Важно отметить, что значение доступно с помощью getData() функции CKEditor или когда вы переключаетесь из редактирования в режиме источника и обратно в режим редактирования.

Вот рабочая jsfiddle:
https://jsfiddle.net/v6zf2vwm/