Make inserted images in CKEditor automatically responsive

ckeditor-responsive-images.js

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

/**

• @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
• For licensing, see LICENSE.html or http://ckeditor.com/license
  */

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?

where place this code please tell me?

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

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

Thanks it's work :D

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.

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