如何在 PrimeNg 编辑器中获得 @ 提及（Angular 中的 Quill + quill-mention）答案

【问题标题】：How to get @ mentions in PrimeNg Editor (Quill + quill-mention in Angular)如何在 PrimeNg 编辑器中获得 @ 提及（Angular 中的 Quill + quill-mention）
【发布时间】：2021-02-26 20:29:53
【问题描述】：

我的任务是为我们的文本编辑器实现提及功能。我正在使用基于 Quill 的 PrimeNg 编辑器。我找到了包quill-mention，它似乎可以帮助解决这个问题。我不确定如何在primeng 编辑器组件中配置它。我看到有一个 getQuill() 函数可能会有所帮助，我只是不确定如何。谢谢！

我可以实际使用该模块并将其传递给用户等，它只是允许我的编辑器使用它。

【问题讨论】：

标签： angular primeng quill

【解决方案1】：

将 quill-mention 导入组件

import Mention from 'quill-mention'

创建 HTML

<p-editor #editor></p-editor>

创建编辑器实例

@ViewChild('editor', { static: true }) editor: Editor;

最后在下面添加

  ngAfterViewInit() {
// init instance
const quilInstance = this.editor.getQuill();
new Mention(quilInstance, {
  mentionDenotationChars: ["@"],
  source: function (searchTerm: string, renderList: (data: any, searchText: string) => void, mentionChar: string) {
    // sample data set for displaying
    // enter your logic here
    const items = [{ id: 1, value: 'Partha' }]
    renderList(items, searchTerm);
  }
})}

【讨论】：

【解决方案2】：

可以监听onInit事件获取编辑器并进行配置。

在模板中：

<p-editor (onInit)="editorOnInit($event)"></p-editor>

在 Typescript 类中：

editorOnInit(event: any) {
    const quillInstance = event.editor;
    new Mention(quillInstance, options);
}

options 可以像 Partha Ranjan 的回答一样。

【讨论】：