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

实际上我在 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>

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

2 个答案: