CKEditor — разрешать ширину изображения только на 100% при предварительном просмотре

#javascript #ckeditor #text-editor

#javascript #ckeditor #текстовый редактор

Вопрос:

При использовании CKEditor и вставке изображения в редактор изображение отображается в его реальном размере.

Итак, если мой редактор имеет ширину 500 пикселей, а изображение — 800, изображение отображается с шириной 800, и для этого в CKEditor есть полоса прокрутки.

Есть ли способ сделать так, чтобы вставленное изображение отображалось в редакторе только как ширина самого редактора?

Спасибо!

Ответ №1:

Для этого есть два возможных решения:

А) измените виджет изображения, чтобы он генерировал тег изображения с определенным классом, например. «imagePointer», а затем в виджете добавьте отвечающий css, например:

 CKEDITOR.plugins.add( 'image', {
    onLoad: function( editor ) {
        CKEDITOR.addCss(
            '.imagePointer {max-width:100%;}')
    }
}
  

Б) в файле contents.css просто добавьте правило для тега изображения:

 img {max-width:100%}