在 Ckeditor 5 中监听鼠标右键（上下文菜单）

Posted 2023-02-16

【中文标题】在 Ckeditor 5 中监听鼠标右键（上下文菜单）

【英文标题】：Listen for right mouse button(Context menu) in Ckeditor 5

【发布时间】：2019-03-21 00:26:53

【问题描述】：

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

对于鼠标左键，我使用 ClickObserver 效果很好，但 ClickObserver 似乎不适用于鼠标右键

【参考方案1】：

根据CKEditor migration document，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 事件添加事件侦听器。

我希望这会有所帮助！

【讨论】：

我不打算使用 ckeditor 上下文菜单（我们不使用 ckeditor 5 的任何 ui 部分）。但是监听鼠标右键事件的能力真的被移除了吗？

对不起，我一直忙于其他问题。这看起来可能有效，但是我有一个问题是要准确找出用户单击的模型中的哪个元素。但它认为我可以通过获取用户单击的 dom 元素，然后使用映射类来获取该 dom 元素的视图节点来解决这个问题。然后获取该视图代码的模型元素。

是的，您可以使用 event.target 找出点击了哪个元素。