ckeditor - Show CKEditor5 Balloon toolbar programatically on right click?

Question

I use CkEditor BalloonEditor:

BalloonEditor.create(document.querySelector('#editor'), { ...options... });

By design the balloon toolbar of CkEditor 5 is only shown when I mark some text in the editor. That's totally okay for standard text operations as making a text bold, italic or changing its colors.

But if I want to insert something (image, table, media) I first must type something, mark it, so that the toolbar is shown before I can insert new content. That is not practical. So actually the balloon editor is great for changing existing content, not to insert new content.

My idea now is, that I want to open the toolbar by clicking with the right mouse button, showing the toolbar instead of the browser's context menu. Nice would be if the toolbar then only contains actions to insert new content (as inserting image, table, media) and the actions for formatting content (as bold, italic, font color) disappears or at least are disabled.

So basically I would implement something like:

<div id="editor" oncontextmenu="showContextMenu(event)">

...

function showContextMenu(event) {
    event.preventDefault();

    // --> Open here the balloon toolbar at the current caret position. How?
}

I tried finding a solution with a hack: When clicking with the right mouse button, I inserted a space character at the clicked position and marked/selected it automatically so that the CkEditor balloon editor opened the toolbar. That worked so far, but then I had this undesired space character in the document and I struggled to remove it gracefully afterwards. Furthermore the context menu also contained the text formatting actions (as bold, italic and so on, since there was text - the inserted space selected).

Another idea would be to develop an own toolbar completely detached from CkEditor and then using Commands to insert the appropriate commands as @denov has suggested in his solution. But I think this should actually be possible to achieve with the CkEditor API by using the class ContextualBalloon. But how?

Does anyone have any idea how to achieve this or can guide me with some directions?

Thx!

question from:https://stackoverflow.com/questions/65886391/show-ckeditor5-balloon-toolbar-programatically-on-right-click

Answer 1

For images you can just drag the image into the editor.

Commands are the way to interact with the editor. The Images plugin uses the ImageInsertCommand

assuming you have the editor assigned to the global window object you could do

function showContextMenu(event) {
    event.preventDefault();
    window.editor.execute('imageInsert', { source: 'https://upload.wikimedia.org/wikipedia/commons/8/8d/Frog_on_palm_frond.jpg'} )
}

Unfortunately, it's not possible to show the balloon toolbar if the selection is collapsed. This behaviour is defined here.