Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Couldn't get the quilljs editor ENTER key press event listener in angular 4+

Tags:

angular

quill

I read about addbinding from official quilljs dicumentation here but i couldn't get ENTER key press event listener, tried other keys and BACKSPACE and they are working as expected but ENTER key event listener is not working. I was following related post here in so but not able to understand, can anyone please provide an example or explain a little on how to add event listener for enter key in configuration?

what i tried so far,

quill.keyboard.addBinding({
  key: Keyboard.keys.ENTER,
}, function(range, context) {
  console.log("enter clicked");
});

--

quill.keyboard.addBinding({
  key: 13,
}, function(range, context) {
  console.log("enter clicked");
});

--

quill.keyboard.addBinding({
  key: 'enter',
}, function(range, context) {
  console.log("enter clicked");
});
like image 247
adarsh Avatar asked Jan 03 '23 18:01

adarsh


1 Answers

I figured out your problem. For special keys like enter and tab you have to overwrite the standard quill documentation. I did so as such:

bindings = {
    enter: {
      key: 13,
      handler: function() {
        console.log('enter pressed');
        this.hideSymbols = !this.hideSymbols;
        console.log(this.hideSymbols);
      }
    }
  };

this.modules = {
      keyboard: {
        bindings: this.bindings
      },
      formula: true,
      toolbar: true,
      counter: { container: '#counter', unit: 'word' },
      equalsSymbol: { container: '#equalsBtn', selector: 'equals' },
      impliesSymbol: { container: '#impliesBtn', selector: 'implies' }
    };

So essentially just make your own bindings object and in your modules call in your constructor add your custom bindings to keyboard as I did.

like image 179
FrankTheTank Avatar answered Jan 05 '23 15:01

FrankTheTank