Angular 9 和在 TinyMCE 中使用动态数据的自定义按钮

Question

我需要一些指导。我想在 Angular 9 项目中使用 tinymce-angular。我已经足够让编辑器正确加载、显示和保存数据了。

下一步是提供 buttons/dropdown-lists，其中包含可添加到编辑器文本中的动态值列表。

我找到了一个示例，其中有人提供了一个 JS 文件作为插件配置，但我想使用我的 angular 服务来填充可以以某种方式传递给配置的值数组。

目前我的代码中的典型实现如下所示

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

关于如何进行的任何想法？干杯迈克

Answer 1

好的，根据网络上的更多提示，我找到了解决方案：

这是在TypeScript文件中，编辑器的配置：

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);
      }
    });
  }
};

}

随着

const test

我正在使用函数外部的对象并将其转换为 TinyMCE 菜单项的相应语法。在 HTML 模板文件中，它看起来像这样：

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

我用来提供给编辑器的对象（名为 'filter'）看起来像这样：

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

}

这是模型文件：

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

我希望这会为别人节省很多时间；）

Angular 9 和在 TinyMCE 中使用动态数据的自定义按钮

Angular 9 and custom Buttons with dynamic data in TinyMCE

angular

tinymce

tinymce-plugins