quill-mention 选择事件。如何从 Quill Mention 中获取选定的提及

问题描述 投票:0回答:1

我使用 Quill 提及 ngx-quill。 每个文本编辑和格式设置都有效。 我找不到 QUILL Mention LISTonSelect 事件。 我最终想要的是将提到的对象(将从下拉列表中选择)推送到数组中。 提及点击和悬停是与提及元素相关的唯一可用的事件侦听器。 如何获取选定的提及???

HTML

<quill-editor [modules]="{ mention: mentionConfig }" [style]="{height: '300px'}"></quill-editor>

Angular TS 导入

import Quill from 'quill';
import 'quill-mention';
import { QuillEditorComponent } from 'ngx-quill';

TS / JS


@ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;


 mentionConfig = {
    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
    mentionDenotationChars: ["@"],
    "toolbar":false,
    source: (searchTerm: string, renderList:any) => {
      // Your mention source logic here
      const values = [
        { id: 1, value: 'Alice' },
        { id: 2, value: 'Bob' },
        { id: 3, value: 'Charlie' },
      ];
      const matches = values.filter(mention => mention.value.toLowerCase().includes(searchTerm.toLowerCase()));
      renderList(matches, searchTerm);
    }
  };
angular quill react-quill mention ngx-quill
1个回答
0
投票

TS / JS

@ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;


 mentionConfig = {
    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
    onSelect: (item, insertItem)=>{
      console.log(item);//Will have the added suggestion/Tag
     }
    mentionDenotationChars: ["@"],
    "toolbar":false,
    source: (searchTerm: string, renderList:any) => {
      // Your mention source logic here
      const values = [
        { id: 1, value: 'Alice' },
        { id: 2, value: 'Bob' },
        { id: 3, value: 'Charlie' },
      ];
      const matches = values.filter(mention => mention.value.toLowerCase().includes(searchTerm.toLowerCase()));
      renderList(matches, searchTerm);
    }
  };
© www.soinside.com 2019 - 2024. All rights reserved.