froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.28k stars 672 forks source link

Angular7 imposible prevent event keydown Enter #3366

Closed omar1989omb closed 5 years ago

omar1989omb commented 5 years ago
Expected behavior.

I am using Froala + tributejs. When I detect the KeyDown Enter event and tribute isActive I want the event to end.

Actual behavior.

I am using Froala + tributejs. When I detect the KeyDown Enter event and tribute isActive, .preventDefault () and .stopPropagation () do not work.

Steps to reproduce the problem.

Attachment repository with code: https://github.com/omar1989omb/froalaangular

Jsfiddle returns errors with Froala and tribute

In app.component.ts is the sample code. I have used the detection in the initialized event as in keydown.

public optionsEditor: Object = {
    placeholderText: 'AddComment!!',
    charCounterCount: false,
    fullPage: false,
    toolbarButtons: ['bold', 'italic', 'strikeThrough', 'underline', 
                      '|', 'fontFamily', 'fontSize', 'color',
                      '|', 'align', 'insertLink', 'emoticons', 'fontAwesome',
                      '|', 'undo', 'redo'
                    ],
    quickInsertButtons: ['embedly', 'ol', 'hr'],
    events : {
      "froalaEditor.initialized": (e, editor) => {
        const trib_local = this.tribute;
        this.tribute.attach(editor.el);

        editor.events.on('keydown', (keydownEvent) => {
          if (keydownEvent.keyCode === 13 && this.tribute.isActive) {
            e.preventDefault();
            e.stopPropagation();
            keydownEvent.preventDefault();
            keydownEvent.stopPropagation();
            console.log('Intilized');
            return false;
          }
        });
      },
      "froalaEditor.keydown": (e, editor, keydownEvent) => {
        if(keydownEvent.originalEvent.key === 'Enter' && this.tribute.isActive) {
          e.preventDefault();
          e.stopPropagation();
          keydownEvent.preventDefault();
          keydownEvent.stopPropagation();
          console.log('KeydownEvent');
          return false;
        }
      }
    }
  }
OS.

Linux Ubuntu 18.04

Browser.

Chrome, Firefox, Edge...

stefanneculai commented 5 years ago

@omar1989omb, you should change it to this:

editor.events.on('keydown', (keydownEvent) => {
          if (keydownEvent.keyCode === 13 && this.tribute.isActive) {
            e.preventDefault();
            e.stopPropagation();
            keydownEvent.preventDefault();
            keydownEvent.stopPropagation();
            console.log('Intilized');
            return false;
          }
        }, **true**);
omar1989omb commented 5 years ago

@omar1989omb, you should change it to this:

Solved, thank you very much.