user5307298 user5307298 - 1 year ago 260
Javascript Question

ckEditor in responsive web design

I am using CKEditor 4.5.11 in my responsive design website. Everything seems to be working fine except 2 ckEditor issues which are listed as under:


  1. How to make images inserted responsive in ckEditor? I used my CSS for them but it didn't work at all. Even it didn't apply to those.

  2. How to convert ckEditor full toolbar into basic and simple toolbar for mobile (small screen) devices e.g. when width goes less than 600px?



I searched a lot on Google and Stack Overflow but no proper solution has been given there except a few Drupal based workaround which I have nothing to deal with and none of my business. I think this topic is not considered seriously on Internet so far.

Any ckEditor plugin, custom JS or CSS solution will be accepted if it does work. Note that I don't want to change (upgrade) my ckEditor because it is very well setup with ckFinder and when I upgraded in past then everything got broken. So please no suggestion on upgrade.

Answer Source

For responsive images, use this:

CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');

If you want to modify the toolbar when browser resizes, you can't do that without destroying the instance and recreate it with another toolbar configuration (the contents will not get lost). For that, you can use window.matchMedia (supported in Firefox, Chrome and IE 10) like this:

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

var mqs = [
    window.matchMedia('(max-width: 600px)')
]

mqs.forEach(function(mq) {
    mq.addListener(widthChange);
});

widthChange(); // call it once initially

function widthChange() {
    if (CKEDITOR.instances.editor1) {
        CKEDITOR.instances.editor1.destroy();
    }
    if (mqs[0].matches) {
        // window width is less than 600px
        CKEDITOR.replace('editor1', { toolbar: toolbar_basic });
    } else {
        // window width is at least 600px
        CKEDITOR.replace('editor1', { toolbar: toolbar_full });
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download