Angular 9 and custom Buttons with dynamic data in TinyMCE

Question

I need some guidance. I want to use tinymce-angular in an Angular 9 project. I am far enough to have the editor load correctly, display and save data.

The next step is to provide buttons/dropdown-lists which will contain a list of dynamic values that can be added to the text in the editor.

I have found an example where someone provides an JS file as plugin configuration but I would like to use my angular services to fill an array of values which can be passed to the configuration somehow.

Currently a typical implementation looks like this in my code

   <editor formControlName="desktophtml" required name="desktophtml" [init]="{
      base_url: '/tinymce',
      suffix: '.min'}">
   </editor>

Any ideas on how to proceed? Cheers Maik

Barzille Barzille · Accepted Answer · 2020-03-31T14:44:47

Ok, with some more hints from the web I found a solution:

This is in the TypeScript file, a configuration for the editor:

tinyMceConfig: any;
filter: Filter[] = [];

ngOnInit() {
  // this.loadData();
  this.configureTinyMce();
}

configureTinyMce() {
  const that = this;
  this.tinyMceConfig = {
  menubar: false,
  branding: false,
  height: 300,
  base_url: '/tinymce',
  suffix: '.min',
  inline: false,
  toolbar: 'filterbutton',
  setup: function (editor) {
    const test = that.filter.map(f => { return {
      type: 'nestedmenuitem',
      text: f.templateVariableName,
      icon: 'template',
      getSubmenuItems: function() {
        return f.fieldNames.map( field => { return {
          type: 'menuitem',
          text: field.memberName,
          icon: 'paste-text',
          onAction: function () {
            editor.insertContent('{{' + f.templateVariableName + '.' + field.memberName + '}}');
          }
        }; });
      }
    }; });
    /* example, adding a toolbar menu button */
    editor.ui.registry.addMenuButton('filterbutton', {
      text: 'Filter',
      fetch: function (callback) {
        callback(test);
      }
    });
  }
};

}

With the

const test

I am using and transforming an object from outside of the function into the corresponding syntax for a TinyMCE menu item. In the HTML template file it looks like this:

<editor 
    formControlName="desktophtml" 
    required 
    name="desktophtml" 
    [init]="tinyMceConfig">
</editor>

The object (named 'filter') I am using to feed the editor looks something like this:

{
    templateVariableName: 'foo',
    fieldNames: [ {
        memberName: 'bar'
    }]

}

This is the model file:

export class Filter {
  templateVariableName: string;
  fieldNames: [any];
}

I hope this will save someone a lot of time ;)

Angular 9 and custom Buttons with dynamic data in TinyMCE

1 Answers