Skip to content

Instantly share code, notes, and snippets.

@fabiomaggio
Created January 22, 2016 19:10
Show Gist options
  • Save fabiomaggio/c2f4b84756cb4d82c0ae to your computer and use it in GitHub Desktop.
Save fabiomaggio/c2f4b84756cb4d82c0ae 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;
}
}
});
});
@IbraheamZayed
Copy link

ment this code

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