Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save leonirlopes/56b73ef3f311e2d76e4f7e216763ce5c to your computer and use it in GitHub Desktop.
Save leonirlopes/56b73ef3f311e2d76e4f7e216763ce5c to your computer and use it in GitHub Desktop.
Make inserted images in CKEditor automatically responsive
// If you want inserted images in a CKEditor to be responsive
// you can use the following code. It creates a htmlfilter for the
// image tag that replaces inline "width" and "style" definitions with
// their corresponding attributes and add's (in this example) the
// Bootstrap "img-responsive" class.
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-responsive');
// 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;
}
}
});
});
@pingpo123
Copy link

how do you use this code? where or what folder to upload?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment