Twitter bootstrap 如何将响应类添加到ckeditor图像对话框？

我有一个网站贝克有CK编辑。 如果没有插入任何类，我想让图像自动具有类“img responsive”。 怎么用？我能做到吗

我找不到这方面的词典

---

每个输入的名称是什么等等？html源代码不会显示这一点。

我很久以前就遇到过同样的问题。我可能复制粘贴了大部分代码，并且自己做了一些小的修改。它的代码有点长，将

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)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];

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

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



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

                                    return element;
                                }
                            }
                });
    });

---

我使用的是一个更简单的解决方案——页面加载后，只需循环浏览图像，并将“img responsive”类添加到父div中的子“img”元素中（在我的示例中为“article”）

---

我只是在下面做了这件事，效果非常好：

$(document).on('turbolinks:load', function() {

    $( "img" ).addClass( "img-responsive" );

});

---

ps：我在rails 5上，这解释了“turbolinks:load”

有什么可以帮助我们了解更多有关该问题的信息吗？

$(document).on('turbolinks:load', function() {

    $( "img" ).addClass( "img-responsive" );

});