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;
}
}
});
});
@bigkiandi
Copy link

@fabiomaggio awsom work dude. keep it up for more creation to help anyone. happy

@senna555
Copy link

senna555 commented May 1, 2017

Very useful
thanks
@kabkee
i would keep line 30 but not line 36

@pingpo123
Copy link

sorry i'm just new to drupal... how do you implement this code? are you going to upload it in the ckeditor or plugins folder? thanks!

@fabiomaggio
Copy link
Author

@pingpo123 this code would go after the initialisation of ckeditor but i've no idea were that is done in Drupal

@sumanahmed
Copy link

it will be very helpful if u say where to implement this code and how to implement this code...

Copy link

ghost commented Apr 16, 2018

You need to add this to your config.js and it is done.

Copy link

ghost commented Apr 18, 2018

/**

CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.filebrowserBrowseUrl = 'index.php?route=common/filemanager';
config.filebrowserImageBrowseUrl = 'index.php?route=common/filemanager';
config.filebrowserFlashBrowseUrl = 'index.php?route=common/filemanager';
config.filebrowserUploadUrl = 'index.php?route=common/filemanager';
config.filebrowserImageUploadUrl = 'index.php?route=common/filemanager';
config.filebrowserFlashUploadUrl = 'index.php?route=common/filemanager';

config.filebrowserWindowWidth = '800';
config.filebrowserWindowHeight = '500';

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

config.resize_enabled = true;
config.htmlEncodeOutput = false;
config.entities = false;

config.contentsLangDirection = 'ltr';
// config.contentsLangDirection = 'rtl';
config.skin = 'moono';
// config.skin = 'kama';
config.toolbar = 'full';
// config.toolbar = 'Custom';

//config.toolbar_Custom =
//[
// { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
// { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
// { name: 'forms', items : [ 'Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField' ] },
// { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] },
// '/',
// { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
// { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
// { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
// { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
// '/',
// { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
// { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
// { name: 'colors', items : [ 'TextColor','BGColor' ] }
//];
};

This is my config.js file @marietteknap, I tried pasting the code before the close parenthesis and it made me unable to view the source of CKeditor. Where do I paste the code?

@muskan123321
Copy link

where place this code please tell me?

@muskan123321
Copy link

where place this code please tell me? for this blog http://pakjobsalert.com

@JamesAndresCM
Copy link

this works fine, but the "problem" is that class img-responsive in bootstrap4 is called img-fluid
only replace "img-responsive" to "img-fluid"
Thanks for this code ;D

@crownbackend
Copy link

Thanks it's work :D

@PZS3
Copy link

PZS3 commented Oct 1, 2020

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.

@Buntysoni
Copy link

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

@IbraheamZayed
Copy link

ment this code

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