Search code examples
ckeditorckeditor4.x

CKEditor 4 - Removing Image Toolbar Button Causes Image Dialog to No Longer Display Width and Height Properties


I am using CKEditor 4 and trying to customize a toolbar to show to non-Admin users of our software. I know how to remove the "Image" button from the toolbar to prevent non-Admins from inserting image elements into our templates. However, I still want them to be able to edit an existing image within a template by double-clicking on it. With the Image insert button removed, I can still perform this action and the resulting dialog displays the source, alt text, and image preview portions. But, the Width, Height, and Ratio Lock controls are hidden. Upon inspecting the markup, it looks as though the table of class cke_dialog_ui_hbox that resides several nodes up from the txtWidth container has an inline display style set to none.

Is there a way to hide / not show the Insert Image toolbar button while still displaying the width, height, and ratio lock controls in the Image dialog box?

I have tried using config.removeButtons as well as config.toolbar and specifying the buttons that I want displayed in the insert group but the presence of the button or not appears to impact the plugin functionality by arbitrarily hiding certain controls.


Solution

  • I learned through Fiddling that the styles attribute on an img definition in the allowedContent object determines whether or not the width and height fields display in the image dialog box.

    CKEDITOR.editorConfig = function( config ) {
        allowedContent = {
            img: {
                attributes: true,
                classes: true,
                styles: 'width,height'
            }
        }
    };
    

    Either I missed that in the documentation somewhere or it just wasn't readily apparent to me.

    Fiddle:

    https://jsfiddle.net/a913q0mz/