Search code examples
javascripttinymceevent-bubbling

tinyMCE v6 event bubbling


I trying to catch keydown triggered on < p > element inside of editor iFrame but with this code, i getting textarea element. Event.stopPropagation() does not stop bubbling, i still getting topmost element

tinymce.init({
   selector: 'textarea',
   setup:function(editor) {
      editor.on('keydown', function(event) {
         console.log(event.target);
      });
   }
});

I see tinymce.event in API with its own stopPropagation() method but don't get how to make it work. Tinymce.event return undefined same as editor.event or tinymce.Event.type

also, there is eventDispatcher Utility API but trying to process keydown via eventDispatcher.dispatch() triggered inside of editor.on keydown get me nothing

In the end, I tried to remove class/style from a block inside of the editor. And cause this block is added programmatically I cant do this with the class name. I need an element pointer where is keydown happened


Solution

  • Find out that I can use tinyMCE selection helper to get an element with current focus (which triggered an event) and solve my task

    So the final code is

    tinymce.init({
        selector: 'textarea',
        setup:function(editor) {
           editor.on('keydown', function(event) {
               const element = editor.selection.getNode();
        
               if (editor.dom.hasClass(element, 'classname')) {
        
               }  
           }
    });