Есть ли способ сделать отзывчивым выходное изображение ckeditor?

Question

У меня есть ckeditor, в котором изображения реагируют на сам редактор, но вывод, который в blade.php (html) не отвечает ..

Я ожидаю, что после редактирования в ckeditor изображение изменится в соответствии с контейнером, обычно загружаемым ..

Answer 1

На самом деле они у меня на config.js

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules( {
        elements : {
            img: function( el ) {
                // Add bootstrap "img-responsive" class to each inserted image
                el.addClass('img-fluid');

                // Remove inline "height" and "width" styles and
                // replace them with their attribute counterparts.
                // This ensures that the 'img-responsive' class works
                var style = el.attributes.style;

                if (style) {
                    // Get the width from the style.
                    var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                        width = match && match[1];

                    // Get the height from the style.
                    match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                    var height = match && match[1];

                    // Replace the width
                    if (width) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                        el.attributes.width = width;
                    }

                    // Replace the height
                    if (height) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                        el.attributes.height = height;
                    }
                }

                // Remove the style tag if it is empty
                if (!el.attributes.style)
                    delete el.attributes.style;
            }
        }
    });
});

В чем проблема с приведенным выше кодом? Это для самого ckeditor или для вывода также в html. Это то же самое, что вы хотите, чтобы я сделал? {{$ Lesson-> body_content}} отображает файл редактирования из ckeditor, как показано ниже. Я хочу, чтобы все изображения автоматически изменяли размеры на меньшие, потому что они слишком сильно перекрывают контейнер ..

<div class="card-body" >
              <br>
              <p class="text text-justify">
                Back to: 
              <a href="{{url('users/course/'.$lesson->course->id)}}"><b>{{$lesson->course->title}}</b></a></h3>
              </p>
              <p class="text text-justify">

                {!! $lesson->body_content !!}
              </p>

Answer 2

Вы можете использовать .on() метод CKEDITOR.

Пример.

CKEDITOR
.on: {
    instanceReady: function() {
        this.dataProcessor.htmlFilter.addRules( {
            elements: {
                img: function( el ) {
                    // Add an attribute.
                    if ( !el.attributes.alt )
                        el.attributes.alt = 'An image';

                    // Add some class.
                    el.addClass( 'newsleft' );
                }
            }
        } );            
    }
}

Редактировать: при начальной загрузке вам нужно использовать el.addClass('img-fluid'); для адаптивных изображений.