Jodit and Tributejs

[einarhuseby]

Jodit Version: 3.1.71
Jodit angular: 1.0.29
Tributejs: 3.2.0

Code

Attaching zurb/tribute to Jodit works fine, here's the essential:

this.tribute.attach(document.getElementsByClassName('jodit_wysiwyg));

Everything works, except selecting item with keypress enter, which Jodit captures.

Expected behavior:
Should be able to configure Jodit to disable capturing keypress when Tribute (or other) is open.

See this Quill with Tribute comment

Actual behavior:
Jodit captures keypress enter and inserts the configured enter type

[xdan]

Hi try this https://github.com/jodit/jodit-tributejs

[einarhuseby]

Thanks @xdan!

I've also been looking at the events listing and is it possible to use the configuration option events to accomplish the same?

Something along:

config = {
events: (event) => {
   if (event === 'beforeEnter') {
      ...
   }
}

Maybe you could give an example of using the events option?

[xdan]

var editor = new Jodit('#editor', {
   events: {
       beforeEnter: function (event) {
           if (tribute.isActive) {
               return true; // prevent enter plugin but not prevent default behavior
           }
       }
   }
});

// or

editor.events.on('beforeEnter', function (event) {
   if (tribute.isActive) {
       return true; // prevent enter plugin but not prevent default behavior
   }
});

[einarhuseby]

Thanks again @xdan!

However, the only event I'm able to make work is afterInit. Haven't tried all events, but a fair amount.

I'm using jodit-angular, have not tried pure ts.

[xdan]

Unfortunately i don't know how return value from EventEmitter in Angular

<jodit-editor #editor (onBeforeEnter)="handleEvent($event)"></jodit-editor>

and

export class AppComponent {
  title = 'app';
  handleEvent() {
    console.log('triggered');
    return false;
  }
}

It is triggered but not return false

[einarhuseby]

For that approach, events via jodit-angular, I think you could solve it by passing a callback from Jodit which then is called in handleEvent with the return value.

But I'm a bit puzzled why the afterInit works but not the other events. Anyway, I updated jodit-angular and tried the last approach but with the same results as in your example.

I then tested the options approach again (with the latest version of jodit-angular) - and now it works! I have not tried replicating by doing a reinstall of the previous jodit-angular version, but the following configuration works for afterInit and beforeEnter with jodit-angular@1.0.36, jodit@3.1.71 and tributejs@3.2.0:

Template:

<jodit-editor  #editor id="jodit-id" [config]="joditConfig" [defaultValue]="content.body" ></jodit-editor>

Component:

 this.joditConfig = {
      buttons: 'paragraph, bold,strikethrough,underline,italic,|, \
                superscript,subscript,|, \
                ul,ol,|, \
                outdent,indent,|, \
                brush,|, \
                image,video,table,link,|, \
                align,undo,redo,\n,cut,hr,eraser,copyformat,|, \
                symbol,selectall,source, fullsize',
      imageDefaultWidth: 400,
      height: 600,
      events: {
        beforeEnter: (event) => {
          if (this.tribute.isActive) {
            return true; // prevent enter plugin but not prevent default behavior
          }
        },
        afterInit: (event, jodit) => {
          this.tribute.attach(document.getElementsByClassName('jodit_wysiwyg'));
          // this.jodit = jodit; // get editor instance
          return true;
        },
      }
    };

[einarhuseby]

Ok, replicated and can confirm that jodit-angular@1.0.35 do not work while jodit-angular@1.0.36 do!

Ref: jodit/jodit-angular#5

[einarhuseby]

Also, (onChange)="handleChange($event)" seems to only fire once in jodit-angular@1.0.36 when having events defined in options.

Removing (onChange)="handleChange($event)" from the template and defining change event in options works but angular throws an error on init because (I guess) change fires on the [defaultValue]="content.body".

The easiest way around this is to make sure you do not assign the new value on the first change being fired.