显示CKEditor5气球工具栏编程右键单击?

Question

我使用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在他的解决方案中建议的那样。但我认为这实际上应该是可以实现与CkEditor API通过使用类ContextualBalloon。但如何?

有没有人知道如何实现这一目标，或者可以指导我一些方向?

谢谢!

Answer 1

对于图像，您可以直接将图像拖到编辑器中。

命令是与编辑器交互的方式。Images插件使用ImageInsertCommand

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

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

不幸的是，如果选择被折叠，则不可能显示气球工具栏。此行为在这里定义。