在Ckeditor 5中聆听鼠标右键(上下文菜单)

Question

当用户单击编辑器中的元素时,如何在Ckeditor 5中侦听鼠标右键(上下文菜单激活).

对于鼠标左键,我使用的ClickObserver工作正常,但ClickObserver似乎不能用于鼠标右键

Answer 1

根据CKEditor 迁移文档，CKEditor 5 中删除了上下文菜单选项，官方标准是使用contextualToolbar。

CKEditor 5 没有附带上下文菜单，而是首选上下文内联工具栏来提供上下文操作。

更新：

我找到了一个你可以使用的 hack，但我不会推荐它，所以使用它的风险由你自己承担！

function onEditorMouseDown(evt) {
  if (evt.which == 3) {
    alert('You right clicked the editor!');
  }
}

var elem = document.querySelector('#editor1');
var cEditor = ClassicEditor
  .create(elem)
  .then(function(editor) {
    let container = editor.ui.view.editable.element;
    if (container) {
      container.addEventListener('mousedown', onEditorMouseDown);
    }
  })
  .catch(function(err) {
    console.error(err.stack);
  });

<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
<h1>CKEditor 5 Example</h1>
<textarea id="editor1"></textarea>

解释：

我在这里所做的是找出编辑器中的可编辑区域，并为元素上的 mousedown 事件添加事件侦听器。

我希望这有帮助！