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

Question

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

对于鼠标左键，我使用 ClickObserver，它运行良好，但 ClickObserver 似乎不适用于鼠标右键

Answer 1

根据 CKEditor migration document , CKEditor 5 中删除了上下文菜单选项，官方标准是使用 contextualToolbar .

CKEditor 5 does not come with a context menu, contextual inline toolbar is preferred instead to offer contextual actions.

更新:

我找到了一个你可以使用的 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 事件添加一个事件监听器。

我希望这有帮助!