Прикладной класс CKeditor скрывает некоторые изображения от просмотра в редакторе - PullRequest
Новая
       22

Прикладной класс CKeditor скрывает некоторые изображения от просмотра в редакторе

0 голосов
/ 12 января 2019

Я использую CKEditor 4.8.0, и в некоторых случаях мои изображения не появляются в окне CKEditor, а отображаются в выводе реальной страницы. Заглядывая дальше, я вижу, что теги изображений обернуты тегом span, который имеет следующие классы: cke_widget_wrapper, cke_widget_inline, cke_widget_image, cke_image_nocaption. 

<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption" data-cke-display-name="image" data-cke-widget-id="19" role="region" aria-label="image widget">

Класс cke_widget_inline устанавливает отображение: inline-block; и это скрывает эти конкретные изображения от отображения в редакторе WYSIWYG.

Разметка прямая: 

<div class="col-sm-6 illustration">
   <img src="/sites/default/assets/image/blog/LandingPage/getting_started.svg">
</div>

Я заметил, что другие изображения, которые действительно появляются, также обернуты в этот тег span с этими классами, и изображения все еще появляются, так что из-за этой проблемы эти изображения могут не отображаться или можно сказать CKEditor не добавлять cke_widgit_inline Класс к элементам, используя config.js?

1 Ответ

0 голосов
/ 15 января 2019

Это в конечном итоге стало проблемой CSS, когда изображения в этой конкретной разметке должны иметь ширину и высоту, определенные, когда CKEditor применяет класс к диапазону, который содержит display: inline-block; править.

Я решил эту проблему, применив высоту и ширину, когда существует этот класс cke_widget_inline, позволяющий показывать его как в CKEditor, так и в режиме быстрого редактирования с использованием CKEditor на внешнем интерфейсе нашего веб-сайта.

...