CODEWITHSUNDEEP
ckeditor5
MTilsted
MTilsted

Reputation: 5518

Listen for right mouse button(Context menu) in Ckeditor 5

How do I listen for right mouse button(Context menu activation) in Ckeditor 5 when the user click on an element in the editor.

For left mouse button I use ClickObserver which works perfectly, but ClickObserver don't seem to work for the right mouse button

Upvotes: 5

Views: 2062

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26085

As per CKEditor migration document, context menu options are removed in CKEditor 5 and official standard is to use contextualToolbar.

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

Update:

I found a hack which you could use, but I wouldn't recomment it so USE IT AT YOUR OWN RISK! 

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>

Explanation:

What I'm doing here is finding out editable area within the editor and adding a event listener for mousedown event on the element.

I hope this helps!

Upvotes: 1

Related Questions