Jodit and Tributejs about jodit

[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 [email protected], [email protected] and [email protected]:

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 [email protected] do not work while [email protected] do!

Ref: jodit/jodit-angular#5

[einarhuseby]

Also, (onChange)="handleChange($event)" seems to only fire once in [email protected] 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.