打字稿-笔芯-Ionic v3笔芯提及的自定义印迹

编程问答 2022-08-12

问题描述

我正在使用带有quill和ngx-quill的Ionic v3进行开发，我需要为quill-mention项目创建自定义印迹。

默认情况下，quill-mention给出以下html：

<span class="mention" data-index="0" data-denotation-char="" data-id="username" data-value="User Name">
    <span contenteditable="false">
        <span class="ql-mention-denotation-char"></span>
        User Name
    </span>
</span>

这远远超过了我正在进行的这项功能所需要的。

我尝试使用quill-mention dataAttributes设置选项来仅启用我需要的选项，但是没有用。 这是我的quill编辑器配置（建立在组件的构造函数上）：

modules = {};
constructor(){
    this.modules = {
        toolbar: {
            container: [
                ['bold','italic','underline','strike'],[{ 'list': 'ordered' },{ 'list': 'bullet' }],[{ 'size': ['small',false,'large','huge'] }],[{ 'header': [1,2,3,4,5,6,false] }],[{ 'align': [] }]
            ]
        },mention: {
            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,mentionDenotationChars: ["@"],source: function(searchTerm,renderList,mentionChar) {
            let values = [
                { id: "username",value: "User Name" },{ id: "date",value: "Date Reported" }
            ];
                
            if (searchTerm.length === 0) {
                renderList(values,searchTerm);
            } else {
                const matches = [];
                for (let i = 0; i < values.length; i++)
                if (
                    ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
                )
                    matches.push(values[i]);
                renderList(matches,searchTerm);
            }
            },showDenotationChar: false,dataAttributes: ['id','value'],blotName: 'alias'
        }
    }
}

我想创建一个印迹以添加以下格式：

<span contenteditable="false" class="mentioned-item" data-id="username" data-value="User Name">
User Name</span>

到目前为止，我还没有使用blot的经验，并且在我的组件中创建了以下内容。 这是给我的html：<a class="mention" contenteditable="false">u ndefined</a>

enter image description here

这是我创建的污点：

import * as quillNamespace from 'quill';

const quill: any = quillNamespace;
const AliasTagInline = quill.import('blots/inline');

export class Alias extends AliasTagInline {

  static create(value: any) {
    const node = super.create(typeof value === 'object' ? value.text : value);
    node.innerText = typeof value === 'object' ? value.text : value;
    node.setAttribute('contenteditable',false);
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('contenteditable'),text: node.innerText
    };
  }
}

Alias['blotName'] = 'alias';
Alias['className'] = 'mentioned-item';
Alias['tagName'] = 'a';

quill.register('formats/alias',Alias);

系统信息：

"ionic-angular": "3.9.2","ngx-quill": "^1.6.0","quill": "^1.3.7","rxjs": "5.5.2","quill-mention": "2.2.7"

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularionic3ionic3ngx-quillquill