如何解决打字稿-笔芯-Ionic v3笔芯提及的自定义印迹
我正在使用带有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>
这是我创建的污点:
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 举报,一经查实,本站将立刻删除。