亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Quill 編輯器中嵌入自定義內聯印跡后插入未定義的印跡

在 Quill 編輯器中嵌入自定義內聯印跡后插入未定義的印跡

冉冉說 2022-06-09 16:22:52
我正在 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 印跡給編輯。執行完上面的函數后,我的編輯器狀態是這樣的。
查看完整描述

1 回答

?
POPMUISE

TA貢獻1765條經驗 獲得超5個贊

參考:https ://quilljs.com/docs/modules/keyboard/


使用 Quill 鍵盤綁定處理 enter 比添加 addLister 更容易,以下方法可幫助您在 quill 編輯器中觸發 enter 事件時進行處理


var quill = new Quill('#editor', modules: {

keyboard: {

  bindings: bindings

}}});



var bindings = {

  handleEnter: {

    key: '13', // enter keycode

    handler: function(range, context) {

       //You can get the context here

    }

  }

};

我希望以上答案能滿足您的需求。


查看完整回答
反對 回復 2022-06-09
  • 1 回答
  • 0 關注
  • 376 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號