如何将响应式类添加到 ckeditor 图像对话框

Question

我有网站面包师有CK编辑器。如果没有插入类，我希望图像自动具有"img 响应"类。如何？我能做到吗

我找不到这个 http://docs.cksource.com/CKEditor_3.x/Howto/Default_Field_Values 的字典每个输入的名称是什么等等？HTML源代码不会显示这一点。

Answer 1

我很久以前就遇到了同样的问题。我可能复制粘贴了大部分代码，我自己做了一些小的修改。它的代码有点长，img-responsive类添加到所有添加的图像中。

 CKEDITOR.replace('editor1');
    CKEDITOR.on('instanceReady', function(ev) {
        //resp. images for bootstrap 3
        ev.editor.dataProcessor.htmlFilter.addRules(
                {
                    elements:
                            {
                                $: function(element) {
                                    // Output dimensions of images as width and height
                                    if (element.name == 'img') {
                                        var style = element.attributes.style;
                                        //responzive images
                                        //declare vars
                                        var tclass = "";
                                        var add_class = false;
                                        tclass = element.attributes.class;
                                        //console.log(tclass);
                                        //console.log(typeof (tclass));
                                        if (tclass === "undefined" || typeof (tclass) === "undefined") {
                                            add_class = true;
                                        } else {
                                            //console.log("I am not undefined");
                                            if (tclass.indexOf("img-responsive") == -1) {
                                                add_class = true;
                                            }
                                        }
                                        if (add_class) {
                                            var rclass = (tclass === undefined || typeof (tclass) === "undefined" ? "img-responsive" : tclass + " " + "img-responsive");
                                            element.attributes.class = rclass;
                                        }
                                        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];
                                            if (width) {
                                                element.attributes.style = element.attributes.style.replace(/(?:^|s)widths*:s*(d+)px;?/i, '');
                                                element.attributes.width = width;
                                            }
                                            if (height) {
                                                element.attributes.style = element.attributes.style.replace(/(?:^|s)heights*:s*(d+)px;?/i, '');
                                                element.attributes.height = height;
                                            }
                                        }
                                    }

                                    if (!element.attributes.style)
                                        delete element.attributes.style;
                                    return element;
                                }
                            }
                });
    });

Answer 2

我只是在下面做了这个，它工作得很好：

$(document).on('turbolinks:load', function() {
    $( "img" ).addClass( "img-responsive" );
});

ps：我在轨道 5 上，它解释了"涡轮链接：负载"

Answer 3

我正在使用一个更简单的解决方案 - 页面加载后，只需循环浏览图像并将"img-response"类添加到父div（在我的例子中为"文章"）中的子"img"元素。

$(document).ready(function(){
  $('article').children('img').each(function(){
    $(this).addClass('img-responsive');
  });
});

Answer 4

这是我的jquery脚本。我将其与Bootstrap一起使用。我将所有 img 扭曲成一个div 并将 width 属性复制到父div 以设置最大宽度，然后复制浮点数。在这种情况下，我可以设置图像的大小，并且仍然可以响应，而且我可以从 CKEDITOR 设置浮动。

function changeImg() {
    var hirmegjelenito = document.querySelector('.hir-megjelenito');
    var imgs = hirmegjelenito.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
        $(imgs[i]).attr('class', 'img-fluid');
        $(imgs[i]).wrap("<div class='container p-0' style='float:" + $(imgs[i]).css("float") + ";max-width:" + $(imgs[i]).css("width") + ";margin:" + $(imgs[i]).css("margin") + "'></div>");
        $(imgs[i]).css({
            "height": "auto",
            "max-width": "100%",
            "width": "",
            "float": "",
            "margin": "0px 0px 0px 0px"
        });
    }
    return imgSrcs;
};