我正在 Twitter 上工作,就像用戶提到 Quill 編輯器一樣。我的自定義印跡代碼是import Quill from 'quill';const Base = Quill.import('blots/inline');export default class MentionBlot extends Base {static create(data) { const node = super.create(data.name); node.innerHTML = `@${data.name}`; node.setAttribute('contenteditable', false); node.setAttribute('name', data.name); node.setAttribute('id', data.id); return node;}MentionBlot.blotName = 'usermention';MentionBlot.tagName = 'aumention';我在下拉列表中顯示用戶列表。每當單擊一個用戶名時,我都會將該用戶作為@User嵌入到羽毛筆編輯器中。這是我為它編寫的點擊事件。我在這里做的事情是用自定義的內聯印跡替換@之后輸入的文本用戶。 searchResult.forEach(element => { element.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); const quillEditor = window.editor; const content = quillEditor.getText(); const quillRange = quillEditor.selection.savedRange; // cursor position if (!quillRange || quillRange.length != 0) return; const cursorPosition = quillRange.index; let mentionStartAt = 0; let lengthToBeDeleted = 0; for (let i = cursorPosition - 1; i >= 0; --i) { const char = content[i]; if (char == '@') { mentionStartAt = i; lengthToBeDeleted += 1; break; } else { lengthToBeDeleted += 1; } } const data = { name: element.innerHTML, id: element.getAttribute('id') }; quillEditor.deleteText(mentionStartAt, lengthToBeDeleted); quillEditor.insertEmbed(mentionStartAt, 'usermention', data, 'api'); const cursorAfterDelete = quillEditor.selection.savedRange.index + element.innerHTML.length; quillEditor.insertText(cursorAfterDelete + 1, ' ', 'api'); quillEditor.setSelection(cursorAfterDelete + 2, 'api'); quillEditor.format('usermention', false, 'api'); }); });}直到這里,一切都像魅力一樣工作,但我面臨的問題是在插入嵌入用戶提及印跡之后,如果用戶在鍵盤上輸入Enter 按鈕以轉到新行,則 Quill 的handleEnter()函數被觸發并且它正在插入@undefined usermention 印跡給編輯。執行完上面的函數后,我的編輯器狀態是這樣的。
在 Quill 編輯器中嵌入自定義內聯印跡后插入未定義的印跡
冉冉說
2022-06-09 16:22:52