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;
}
}
});
});
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