How to add responsive class to ckeditor image dialog?

Question

I have website baker that has CK Editor. I want to have images automatically have the class "img-responsive" if no classes are inserted. How? Can i Do that

I cant find a dictionary of this http://docs.cksource.com/CKEditor_3.x/Howto/Default_Field_Values what names are every input and so on? and the html source wont show that.

Answer 1

I just did this below and it works perfect:

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

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

});

ps: I am on rails 5 which explains the 'turbolinks:load'

Answer 2

I'm using a simpler solution - once the page loads, just loop through the images and add an 'img-responsive' class to the child 'img' elements within your parent div ('article' in my case).

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

Answer 3

Here's mine jquery script. I use it with Bootstrap. I warp all the img into an div and copy the width property to the parent div to set the max-width, and copy the float. In this case I can set the size of the image and still will be responsive plus I can set the float from 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;

};