Angular集成TinyMCE7自动补全器遇弹窗不显示问题求助

1. 修复编辑器初始化配置的语法错误 #

你的HTML中[init]配置存在两处语法问题，会直接导致配置失效：

• 重复定义toolbar属性，且第二个toolbar的引号嵌套错误（JS对象中用双引号包裹数组会触发语法报错）
• 配置对象内存在多余逗号（plugins行末尾的逗号，部分环境下会导致解析失败）

修改后的HTML代码：

<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',
      setup: (editor) => {
        const onAction = (autocompleteApi, rng, value) => {
          editor.selection.setRng(rng);
          editor.insertContent(value);
          autocompleteApi.hide();
        };

        // 必须定义specialChars变量，否则补全无数据
        const specialChars = [
          { text: '长破折号', value: '—' },
          { text: '省略号', value: '…' },
          { text: '版权符号', value: '©' }
        ];

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

        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);
            });
          }
        });
      }
    }"
>
</editor>

2. 确认specialChars变量已正确定义 #

你的代码中使用了specialChars但未给出具体定义，若该变量不存在，getMatchedChars会返回空数组，导致补全弹窗无内容甚至不触发。必须确保它是包含text（显示名称）和value（插入内容）属性的数组。

3. 验证触发逻辑的正确性 #

• 配置中minChars: 1意味着输入触发符-后，需要继续输入至少1个字符才会弹出补全窗口
• 打开浏览器控制台检查是否有报错（比如编辑器初始化失败、变量未定义等），这类报错会直接导致自动补全器无法完成注册

4. 确保setup函数已注入到init配置中 #

之前的代码将setup函数单独拆分，必须将其完整包含在编辑器的init配置对象内，否则编辑器无法执行自动补全器的注册逻辑。

内容的提问来源于stack exchange，提问作者Aggi George