image2 plugin not work when remove 'Image' button from the toolbar

[Donnie Nguyen]

I added image2 ( Enhanced Image ) plugin to my CKEditor 4.5.2, everything was okay until I remove the 'Image' button from the toolbar. Now, when i click on the image, there is no section in the dialog box to show / hide caption. And when I select the options like: align left / right / center, it does not work.

[Piotrek Koszuliński]

If you removed the button from the toolbar, the Image feature is not being registered to the ACF. You can do this manually e.g. this way:

editor.addFeature( editor.ui.get( 'Image' ).toFeature() );

Then it should get back to normal.

Read more here: ​http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf

[Donnie Nguyen]

Many thanks for reply, but now i get "Uncaught TypeError: Cannot read property 'get' of undefined"

Replying to Reinmar:

If you removed the button from the toolbar, the Image feature is not being registered to the ACF. You can do this manually e.g. this way:

editor.addFeature( editor.ui.get( 'Image' ).toFeature() );

Then it should get back to normal.

Read more here: ​http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf

[Donnie Nguyen]

here is my config:

$('#content-body-125').ckeditor({
                skin: 'flat',
                language: 'vi',
                enterMode: CKEDITOR.ENTER_P,
                extraPlugins: 'simpleuploads',
                removePlugins: 'uploadimage,uploadwidget',
                image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
                image2_captionedClass: 'image-captioned',
                toolbar: [
                    [
                        'TextColor',
                        'BGColor',
                        '-',
                        'Bold',
                        'Italic',
                        'Underline',
                        'Strike',
                        '-',
                        'JustifyLeft',
                        'JustifyCenter',
                        'JustifyRight',
                        'JustifyBlock',
                        '-', 
                        'NumberedList',
                        'BulletedList',
                        '-',
                        'Blockquote',
                        '-',
                        'Link',
                        'Unlink',
                        '-',
                        'RemoveFormat'
                    ],
                    [
                        // 'Image',
                        'addFile',
                        // 'Embed',
                        'Table',
                        'HorizontalRule',
                        'Smiley',
                        'SpecialChar'
                    ],
                    [
                        'Styles',
                        'Format',
                        // 'Font',
                        // 'FontSize',
                        '-',
                        'Sourcedialog',
                        '-',
                        'Undo',
                        'Redo',
                        'AjaxUpdate',
                    ]
                ]
            });

[Piotrek Koszuliński]

You need to call that line in a proper moment (most likely you tried this too early). The best would be on editor#pluginsLoaded. To do that, just add:

on: {
    pluginsLoaded: function( evt ) {
        var editor = evt.editor;
        editor.addFeature( editor.ui.get( 'Image' ).toFeature() );
    } 
}

to your config (e.g. after toolbar).

[Donnie Nguyen]

I added the code as your suggestion, but still get "Uncaught TypeError: Cannot read property 'toFeature' of undefined"

Replying to Reinmar:

You need to call that line in a proper moment (most likely you tried this too early). The best would be on editor#pluginsLoaded. To do that, just add:

on: {
    pluginsLoaded: function( evt ) {
        var editor = evt.editor;
        editor.addFeature( editor.ui.get( 'Image' ).toFeature() );
    } 
}

to your config (e.g. after toolbar).

[Piotrek Koszuliński]

Hm... sorry. I forgot that the UI item needs to be created beforehand. The toolbar plugin usually does this, but not if you remove the button from it.

So what you need is:

editor.addFeature( editor.ui.create( 'Image' ) );

See this for instance: ​http://jsfiddle.net/oleq/Ljn9tfg6/

[Donnie Nguyen]

It's work. Thank you very much, Reinmar !

Replying to Reinmar:

Hm... sorry. I forgot that the UI item needs to be created beforehand. The toolbar plugin usually does this, but not if you remove the button from it.

So what you need is:

editor.addFeature( editor.ui.create( 'Image' ) );

See this for instance: ​http://jsfiddle.net/oleq/Ljn9tfg6/