代码之家 › 专栏 › 技术社区 › MTilsted

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

ckeditor5

5

MTilsted · 技术社区 · 6 年前

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

对于鼠标左键,我使用的ClickObserver工作得很好,但是ClickObserver似乎不适用于鼠标右键

1 回复 | 直到 6 年前

1

Dipen Shah 5 年前

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

CKEditor 5没有上下文菜单,上下文内联首选工具栏而不是提供上下文操作。

更新:

我找到一个你可以用的黑客,但我不这么认为 使用它的风险由你自己承担!

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事件的事件侦听器。

我希望这有帮助!

推荐文章

Evenstar · 当我从AJAX调用中获取返回的数据时,没有定义CKEDITOR

6 年前

Apurv Chaudhary · 如何在Angular 4中使用CKEditor?

6 年前

Pavel Prokofiev · 使用CKEditor 5的多个文本区域

6 年前

stonyau · 如何在CKEDITOR 5中获取工具栏可用项?

6 年前

Russell Salsbury · CKEditor 5 InlineEditor——如何配置工具栏?

7 年前

user3691644 · 如何从CKEditor 5实例获取数据

7 年前