Angular 9 и пользовательские кнопки с динамическими данными c в TinyMCE - PullRequest
Новая
       77

Angular 9 и пользовательские кнопки с динамическими данными c в TinyMCE

0 голосов
/ 31 марта 2020

Мне нужно руководство. Я хочу использовать tinymce- angular в проекте Angular 9. Я достаточно далеко, чтобы редактор загружался правильно, отображал и сохранял данные.

Следующим шагом является предоставление кнопок / выпадающих списков, которые будут содержать список значений Dynami c, которые можно добавить в текст в редакторе.

Я нашел пример, когда кто-то предоставляет файл JS в качестве конфигурации плагина, но я хотел бы использовать свои сервисы angular для заполнения массива значений, которые можно передать в конфигурация как-то.

В настоящее время типичная реализация выглядит так в моем коде 

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

Есть идеи, как поступить? Cheers Maik

1 Ответ

0 голосов
/ 31 марта 2020

Хорошо, с некоторыми подсказками из Интернета я нашел решение:

Это файл TypeScript, конфигурация для редактора: 

tinyMceConfig: any;

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'
    }]

}

Надеюсь, это сэкономит кому-то много времени;)

...