有没有办法使 ckeditor 的输出图像响应

Question

我有ckeditor，其中图像在编辑器本身上是响应的，但是blade.php(html(中的输出没有响应。

我希望在 ckeditor 图像中编辑后会根据容器通常引导程序调整大小。

Answer 1

您可以使用

CKEDITOR 的.on()方法。

前任。

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');。

Answer 2

实际上我在配置上有这些.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)widths*:s*(d+)px/i.exec(style),
                        width = match && match[1];
                    // Get the height from the style.
                    match = /(?:^|s)heights*:s*(d+)px/i.exec(style);
                    var height = match && match[1];
                    // Replace the width
                    if (width) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|s)widths*:s*(d+)px;?/i, '');
                        el.attributes.width = width;
                    }
                    // Replace the height
                    if (height) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|s)heights*: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>