CKEditor - Редактируемый контент CSS мешает стилю панели редактора

Question

Я использую CKEditor, чтобы позволить пользователям редактировать документы HTML.Мне нужно, чтобы пользователи могли размещать любой вид CSS или HTML в своих документах.Когда CSS документа пользователя имеет !important правила, они изменяют стиль панели инструментов CKEditor.

Это можно увидеть здесь: https://jsfiddle.net/hqpfjzyr/1/

Нажмите на «Предварительный просмотр ссылки», и выВы увидите, что кнопки на панели инструментов также красные.

Это поведение описано здесь документами CKEditor (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html), но я не могу понять, как его применить. Моя таблица стилей скинавключает в себя reset.css, но, похоже, это не влияет на стилизацию.

Единственное, о чем я могу подумать, это добавить больше CSS, нацеленных на панель инструментов, и явно установить для каждого атрибута правильное значение с помощью * 1014.* правила, но это кажется сложной задачей.

Что мне здесь не хватает?

Answer 1

Это поведение описывается здесь документами CKEditor (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html), но я не могу понять, как его применить. Моя таблица стилей обложки включает в себя reset.css, но, похоже, она не влияет на моделирование.

То, что описано в документации CKEditor, не включает регистр с флагом !important, потому что он не может работать так, как вы хотите. Этот флаг перезаписывает другие правила CSS, в том числе и в файле сброса. Если вы все еще хотите использовать !important внутри редактора, вы можете использовать классический редактор вместо встроенного. Измените CKEDITOR.inline( на CKEDITOR.replace. Как это поможет? Классический редактор отображается внутри iframe, который имеет отдельные стили, которые не могут влиять на что-либо за его пределами.