imagetoolbar not show when select an image

[juanbits]

Hi, i have the next in my settings:

CKEDITOR_5_CONFIGS = {
    "default": {
        "toolbar": [
            "bold",
            "italic",
            "imageUpload",
        ],
        "image": {
            "toolbar": [
                "imageTextAlternative",
                "|",
                "imageStyle:alignLeft",
                "imageStyle:alignRight",
                "imageStyle:alignCenter",
                "imageStyle:side",
                "|",
            ],
            "styles": [
                "full",
                "side",
                "alignLeft",
                "alignRight",
                "alignCenter",
            ],
        },
    },
}

i see on the ckeditor 5 demo ( https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html ) when i upload an image and selects the image object on the canvas a image toolbar appears.

but with this django integration when i select the image object in the canvas, not appears that toolbar and i dont have an error or message in the browser console. any idea?

thanks in advance

[jgwillard]

Change your configuration to match the example in the docs:

CKEDITOR_5_CONFIGS = {
    "default": {
        "toolbar": [
            "bold",
            "italic",
            "imageUpload",
        ],
        "image": {
            "toolbar": [
                "imageTextAlternative",
                "toggleImageCaption",
                "|",
                "imageStyle:inline",
                "imageStyle:wrapText",
                "imageStyle:breakText" "|",
                "resizeImage",
                "|",
                "ckboxImageEdit",
            ],
            "styles": [
                "full",
                "side",
                "alignLeft",
                "alignRight",
                "alignCenter",
            ],
        },
    },
}

[juanbits]

@jgwillard with the next config:

"image": {
            "toolbar": [
                "imageTextAlternative",
                "toggleImageCaption",
                "|",
                "imageStyle:inline",
                "imageStyle:wrapText",
                "imageStyle:breakText",
                "|",
                "resizeImage",
                "|",
                "ckboxImageEdit",
            ],
            "styles": [
                "full",
                "side",
                "alignLeft",
                "alignRight",
                "alignCenter",
            ],
           ...

i got the error in console: toolbarview-item-unavailable {item: 'ckboxImageEdit'}item: "ckboxImageEdit"[[Prototype]]: Object

[jgwillard]

Looks like that's a plugin that you would have to install separately... I'm not sure how to do that but if you remove that item the rest should work as expected.

[juanbits]

@jgwillard i added the plugin and other required (according to https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ckbox/docs/features/ckbox.md ) bit continut without work

[juanbits]

i think ckbox is another plugin not required for the image toolbar

[jgwillard]

Yes, if you remove that string from the config everything else in the toolbar should display as expected.

[juanbits]

so i dont understand why you said: include ckboxImageEdit in the config if no is required for ?

[goapunk]

ckbox is a commercial plugin which requires a license, so unless you bought one this is probably not the right thing to add?

[goapunk]

the toolbar appears correctly in the example blog application, maybe it helps if you can share your project @juanbits ?

[juanbits]

@goapunk i make a double check and i see the toolbar appears on the admin

but no in editors inside modals:

[goapunk]

@juanbits another guess could be that you have some custom css which makes the toolbar invisible by accident, that could explain why it appears in the admin but not in the modals. Can you find the toolbar in the dev tools / inspector? If you can find it maybe check stuff like z-index etc. and see if one is responsible for hidding it.