Wysiwyg-editor: Detect keypress for enter key

[jpgilchrist]

It seems you've stopped the event for keydown for the "enter" key. However, we have a use case where we would like to "send a message" on enter. It still propogates the keyup event for enter, but not keydown or keypress.

Expected behavior.

detect keydown/keypress on enter

editor.on('froalaEditor.keypress, function (e, editor, keypressEvent) {
    if ((e.which == 13) || e.which == 10) && !e.shiftKey) {
        // do something here... don't do froala default behavior... 
    }
})

Actual behavior.

The event is never caught when the "enter" key is pressed

Steps to reproduce the problem.

setup a listener to froalaEditor.keypress

OS.

linux mint

Browser.

chrome beta

[jpgilchrist]

Here's how I solved my problem. It'd be nice if this was provided by the package as an option.

this.element[0].addEventListener("keydown", function (e) {
  if ((e.which == 13 || e.which == 10)) {
    e.stopImmediatePropagation();
    e.preventDefault();

    if (e.shiftKey) {
      if (self.editor) {
        self.editor.cursor.enter();
      }
    } else {
      // do my custom thing... 
    }
  }
}, true);

this.element.froalaEditor();

[stefanneculai]

You can do it using the events.on method and pass true for the last argument. This will bind your event before other events in the editor.

[jpgilchrist]

Ah. I see. Excellent. Thank you for your response!

[nicooprat]

I'm using something like:

$('textarea').froalaEditor('events.on', 'keydown', (e) => {
  if(e.keyCode == 13) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
}, true);

But I can't prevent the event from bubbling up and so creating a new paragraph in the editor. Any idea why? I also tried keypress with no luck.

[dianaprajescu]

@nicooprat you should do return false at the end of the callback to stop the event from bubbling up. I see that you're trying to prevent enter. There is a built-in way for doing it: https://www.froala.com/wysiwyg-editor/docs/options#multiLine.

[nicooprat]

@dianaprajescu Thanks for your quick answer. I think I misunderstood something, since any of these solutions seem to work: https://jsfiddle.net/nicooprat/gxoh9xL9/6/ (Chrome 51 on Mac latest).

Thanks for pointing out the multiLine option, but it won't be helpful in my case, I'd like to cancel "enter" keypress conditionally...

[jpgilchrist]

@nicooprat here: https://jsfiddle.net/gxoh9xL9/7/

should do what you want it to do...

[nicooprat]

@jpgilchrist Yeah! This seems to do the trick: e.stopImmediatPropagation();.

Is this a typo in Froala? The actual function has a "e" in "immediate": https://developer.mozilla.org/fr/docs/Web/API/Event/stopImmediatePropagation

Thanks!

[jpgilchrist]

@nicooprat no mine was the typo... You may not need the stop immediate propagation ... Sorry for the non formatted typing. Responding from my phone.

[nicooprat]

@jpgilchrist I really confirm that e.stopImmediatPropagation() works, but removing it or replacing it by e.stopImmediatePropagation() doesn't work.

[jpgilchrist]

@nicooprat
First, the reason why my first example worked was definitely because of the typo. It was actually throwing an error thus stopping the execution of the javascript.

However, that made me realize why your example wasn't working in the first place. The boolean parameter for the events.on('keydown', () => {}, true) tells Froala to bind the event _before_ Froala's internal events. Since you were initializing Froala before you established this event listener there's no way for Froala to bind yours first. Therefore, you must bind your events first and then initialize Froala. See my updated jsfiddle here: https://jsfiddle.net/gxoh9xL9/8/

[nicooprat]

Great, thanks!

[rodrigobutta]

To avoid the ENTER, just put a Return false like this:

$('.froala').froalaEditor('events.on', 'keydown', (e) => { if (e.which == "13" || e. which == "10") { e.preventDefault(); e.stopPropagation(); return false; } }, true);

Now you can control what happens when an enter is pressed in the AREA.

Hope it helps!!

[silentsnooc]

This is not working for me .. I want to prevent the Enter from triggering a newline in the Froala editor but this:

// in onKeyDownEvent(e, editor, event) {}
if (event.keyCode === 13) { // Enter
  console.log('ENTER pressed');
  if (this.searchMode) {
    console.log('ENTER in search mode pressed ...')
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    return false;
  }
} 

does not do the trick. I am working with a div element.

Environment

Angular 6

[silentsnooc]

@stefanneculai @dianaprajescu Any idea how this would look like in Angular/Typescript?

$('textarea').froalaEditor('events.on', 'keydown', (e) => {});

How can I register a callback for events.on, keydown. The following is not working for me:

editorOptions = {
  events: {
    'froalaEditor.keydown': (e, editor, event) => this.onKeyDownEvent(e, editor, event)
  }
};

See my comment above.

[stefanneculai]

It would be best to use the manual initialization for that: https://github.com/froala/angular-froala-wysiwyg#manual-initialization.