Настройка стиля абзаца по умолчанию без взаимодействия с пользователем

Question

Я пытаюсь установить стиль по умолчанию, применяемый к P elements, которые автоматически создаются, когда пользователь входит в пустую область редактирования. Я много часов искал ответа, но ничего не нашел. Требования:

• Стиль должен быть рядный, нет таблицы стилей
• Нет взаимодействия с пользователем, не плагин формат/стиль не щелкать

Когда пользователь щелкает в области редактирования и начинает печатать, Я хочу, чтобы стиль был применен и виден автоматически. Неужели есть способ сделать это?

Ближайший я получил это с помощью htmlFilter, например:

p_rule = { 
    elements : { 
     p : function(element) { 
      if (element.attributes.style === undefined) { 
       element.attributes.style = "color: #0000ff;"; 
      } 
     } 
    } 
}; 
ev.editor.dataProcessor.htmlFilter.addRules(p_rule); 

Но новый стиль автоматически не виден.

Это становится видимым, если пользователь переходит в режим редактирования исходного кода и возвращается к WYSIWYG, но я хочу, чтобы он был автоматическим.

Я попытался с помощью updateElement() в функции фильтра, но он не работает и создает бесконечную рекурсию:

p_rule = { 
    elements : { 
     p : function(element) { 
      if (element.attributes.style === undefined) { 
       element.attributes.style = "color: #0000ff;"; 
       CKEDITOR.instances['editor1'].updateElement(); 
      } 
     } 
    } 
}; 
ev.editor.dataProcessor.htmlFilter.addRules(p_rule); 

(я предполагаю updateElement() запускающий фильтр)

Если я использую setData(getData()) от случая I может странно получить textarea для обновления с изменениями применяется фильтр, например:

CKEDITOR.instances['editor1'].on('blur', function() { 
    CKEDITOR.instances['editor1'].setData(CKEDITOR.instances['editor1'].getData()); 
}); 

Но это тоже требует взаимодействия с пользователем. Использование события «change» создает рекурсию.

Я новичок в CKEditor и, очевидно, что-то не хватает на то, как фильтр работает в отношении того, что в настоящее время отображается в текстовом поле.

Любой CKEditor гуру там? Помогите!

Thanks

Answer 1

Я действительно советую не идти этим путем. Вы столкнетесь с бесчисленными проблемами, например, если вы скопируете пасту &, что если вы измените формат на h1, а затем обратно, что, если вы создадите элемент списка, а затем преобразуете его в абзац и т. Д. И т. Д. действительно десятки из них. Вам нужно будет переписать половину редактора.

Способ справиться с этим в CKEditor 4 не переосмысливать это:

Стиль должен быть рядный, ни одна таблица стилей

Внутри CKEditor вам явно нужно использовать таблицы стилей. Я предполагаю, что вы хотите встроенные стили в выходе. Поэтому я бы предложил следующее:

1. Напишите правило htmlFilter, которое добавляет этот стиль к каждому абзацу.
2. Напишите правило DataFilter, которое удаляет этот стиль из каждого абзаца.

Второе правило необходимо, поэтому, если вы сохраните данные и затем загрузите их обратно в редактор, стили не загрязняют его.

PS. CKEditor 5 отделит модель данных от рендеринга (вид), чтобы вы могли визуализировать абзац, как вы хотите, не затрагивая, как другие функции взаимодействуют с ним. Узнайте больше о CKEditor 5 в this article.