Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
});
});
@milerwan
Copy link

milerwan commented Jul 28, 2016

Hi,
How to "activate" the assumption of this file by ckeditor?
Thanks !

@fabiomaggio
Copy link
Author

fabiomaggio commented Nov 14, 2016

@milerwan what do you mean with "activate"? You just have to execute this code after the initialisation of CKEditor

@slawa-dev
Copy link

slawa-dev commented Nov 28, 2016

@fabiomaggio Thanks, that is a good quick fix. CK Editor should really not use inline css for images.

@kabkee
Copy link

kabkee commented Dec 21, 2016

@fabiomaggio this codes work but I should delete the two lines

el.attributes.width = width; at the 30 line.
el.attributes.height = height; at the 36 line.

My ckeditor is 4.6.8 full version. Thanks.

@leonirlopes
Copy link

leonirlopes commented Mar 16, 2017

@fabiomaggio Very grateful for his contribution, worked perfectly

@bigkiandi
Copy link

bigkiandi commented Apr 13, 2017

@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

pingpo123 commented May 23, 2017

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

fabiomaggio commented Jun 28, 2017

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

@sumanahmed
Copy link

sumanahmed commented Nov 19, 2017

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

muskan123321 commented Jun 7, 2018

where place this code please tell me?

@muskan123321
Copy link

muskan123321 commented Jun 7, 2018

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

@JamesAndresCM
Copy link

JamesAndresCM commented Jun 14, 2018

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

crownbackend commented May 4, 2019

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

Buntysoni commented Sep 3, 2021

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

IbraheamZayed commented Nov 4, 2021

ment this code

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