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

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

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

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!

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

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

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

/**

• @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