Opened 4 years ago

Closed 4 years ago

#13661 closed Bug (worksforme)

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

Reported by: Donnie Nguyen Owned by:
Priority: Normal Milestone:
Component: UI : Widgets Version:
Keywords: Cc:

Description

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.

Change History (8)

comment:1 Changed 4 years ago by Piotrek Koszuliński

Keywords: image2 widget dialog toolbar button removed
Status: newpending
Version: 4.5.2

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

comment:2 in reply to:  1 Changed 4 years ago by 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

Last edited 4 years ago by Donnie Nguyen (previous) (diff)

comment:3 Changed 4 years ago by 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',
                    ]
                ]
            });

comment:4 Changed 4 years ago by 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).

comment:5 in reply to:  4 Changed 4 years ago by Donnie Nguyen

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

http://i.imgur.com/YARfOP5.png

http://i.imgur.com/wuN7jVK.png

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).

comment:6 Changed 4 years ago by 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/

comment:7 in reply to:  6 Changed 4 years ago by 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/

comment:8 Changed 4 years ago by Donnie Nguyen

Resolution: worksforme
Status: pendingclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy