Created
January 22, 2016 19:10
-
-
Save fabiomaggio/c2f4b84756cb4d82c0ae to your computer and use it in GitHub Desktop.
Make inserted images in CKEditor automatically responsive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} | |
}); | |
}); |
This is Awesome Bro, I am using this in My ASP.NET Website CkEditor.
If Anybody Don't Know Where to Place/Paste this Code, Then I Will tell You.
Just Copy this Code and Page into Ckeditor's Configs.js File
ment this code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, i'm using image2 in ckeditor can anybody please help me where to post this code, I pasted in the ckeditor config.js but there isn't much of a change.