右键单击以编程方式显示 CKEditor5 Balloon 工具栏？

问题描述

我使用 CkEditor BalloonEditor：

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

根据设计，CkEditor 5 的气球工具栏仅在我在编辑器中标记某些文本时才会显示。对于标准文本操作（例如将文本设为粗体、斜体或更改其颜色）来说，这完全没问题。

但是如果我想插入一些东西（图像、表格、媒体），我首先必须输入一些东西，标记它，以便在我可以插入新内容之前显示工具栏。那是不实用的。所以实际上气球编辑器非常适合更改现有内容，而不是插入新内容。

我现在的想法是，我想通过单击鼠标右键来打开工具栏，显示工具栏而不是浏览器的上下文菜单。如果工具栏仅包含插入新内容的操作（如插入图像、表格、媒体），并且格式化内容的操作（如粗体、斜体、字体颜色）消失或至少被禁用，那就太好了。

所以基本上我会实现类似的东西：

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

...

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

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

我尝试通过 hack 找到解决方案：当用鼠标右键单击时，我在单击的位置插入一个空格字符并自动标记/选择它，以便 CkEditor 气球编辑器打开工具栏。到目前为止，这是有效的，但后来我在文档中出现了这个不需要的空格字符，之后我很难优雅地将其删除。此外，上下文菜单还包含文本格式操作（如粗体、斜体等，因为有文本 - 选择了插入的空格）。

另一个想法是开发一个与 CkEditor 完全分离的自己的工具栏，然后使用命令插入适当的命令，正如@denov 在他的解决方案中所建议的那样。但我认为这实际上应该可以通过使用 ContextualBalloon 类通过 CkEditor API 实现。但是如何？

有人知道如何实现这一目标或可以指导我一些方向吗？

谢谢！

解决方法

对于图像，您只需将图像拖入编辑器即可。

Commands 是与编辑器交互的方式。图片插件使用 ImageInsertCommand

假设您已将编辑器分配给您可以执行的全局窗口对象

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

不幸的是，如果选择折叠，则无法显示气球工具栏。此行为定义为 here。

ckeditor ckeditor ckeditor ckeditor5