Tinymce - 自动完成器与 Angular 集成

Question

我试图在我的角度应用程序中使用tinymce7集成自动完成器功能。我正在使用自托管的tinymce npm 包。

我已经集成了这里提到的steos的tinymce编辑器 - https://www.tiny.cloud/docs/tinymce/latest/angular-pm/

要使用 autocmpleter 功能，我在 init - config 中添加了设置，并遵循文档中提到的相同操作

 <editor    
    apiKey="no-api-key"
    [(ngModel)]="content"
    height=250
    [disabled]="false"
    [init]="{
      height: 250,
      
      plugins: ' lists link image table code help wordcount save visualblocks',
      toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help | customStrikethrough',
    toolbar="[
        'undo redo | styles | bold italic | link image | save | alignleft aligncenter alignright | save'
      ]"
  >
  </editor>

在JS

 setup: (editor) => {
    const onAction = (autocompleteApi, rng, value) => {
      editor.selection.setRng(rng);
      editor.insertContent(value);
      autocompleteApi.hide();
    };

    const getMatchedChars = (pattern) => {
      return specialChars.filter(char => char.text.indexOf(pattern) !== -1);
    };

    /**
     * An autocompleter that allows you to insert special characters.
     * Items are built using the CardMenuItem.
     */
    editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {
      trigger: '-',
      minChars: 1,
      columns: 1,
      highlightOn: ['char_name'],
      onAction: onAction,
      fetch: (pattern) => {
        return new Promise((resolve) => {
          const results = getMatchedChars(pattern).map(char => ({
            type: 'cardmenuitem',
            value: char.value,
            label: char.text,
            items: [
              {
                type: 'cardcontainer',
                direction: 'vertical',
                items: [
                  {
                    type: 'cardtext',
                    text: char.text,
                    name: 'char_name'
                  },
                  {
                    type: 'cardtext',
                    text: char.value
                  }
                ]
              }
            ]
          }));
          resolve(results);
        });
      }
    });

但是当输入触发值时我没有看到弹出窗口打开。请帮忙提供建议。预先感谢

Answer 1

请尝试以下代码。它对我来说非常有效！

app.component.ts 文件

import { Component, NgZone, OnInit } from '@angular/core';

const specialChars = [
  { text: 'exclamation mark', value: '!' },
  { text: 'at', value: '@' },
  { text: 'hash', value: '#' },
  { text: 'dollars', value: '$' },
  { text: 'percent sign', value: '%' },
  { text: 'caret', value: '^' },
  { text: 'ampersand', value: '&' },
  { text: 'asterisk', value: '*' },
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'tinymce-angular-demo';

  constructor(private zone: NgZone) {}

  ngOnInit(): void {
    // this.zone.runOutsideAngular(() => {});
  }

  handleSetup(editor: any) {
    editor.ui.registry.addAutocompleter('specialChars', {
      trigger: ':',
      minChars: 1,
      columns: 'auto',
      fetch: (pattern: any) => {
        let matchedNames = specialChars.filter(obj =>
          obj?.text.toLowerCase().indexOf(pattern.toLowerCase()) !== -1
        );
        return new Promise((resolve: any) => {
          const items = matchedNames.map(obj => {
            return {
              type: 'autocompleteitem',
              value: obj.value,
              text: obj.text,
              icon: obj.value
            };
          });
          resolve(items);
        });
      },
      onAction: (autocompleteApi: any, rng: any, value: any) => {
        editor.selection.setRng(rng);
        editor.insertContent(value);
        autocompleteApi.hide();
      }
    });
  }
}

app.component.html

<editor
  id="specialchars_cardmenuitems"
  [init]="{ 
    base_url: '/tinymce',
    plugins: 'lists link image table code help wordcount',
    suffix: '.min',
    height: 250,
    setup: handleSetup,
  }"
></editor>

输出：