Wysiwyg-editor: Angular7 imposible prevent event keydown Enter

Created on 27 Mar 2019  路  2Comments  路  Source: froala/wysiwyg-editor

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...

Most helpful comment

@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**);

All 2 comments

@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, you should change it to this:

Solved, thank you very much.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Fandangi picture Fandangi  路  3Comments

bnjmnfnk picture bnjmnfnk  路  4Comments

homoky picture homoky  路  3Comments

Nucs picture Nucs  路  4Comments

archonic picture archonic  路  4Comments