Неопределенное пятно вставляется после встраивания встроенного блоттинга в редактор Quill - PullRequest
Новая
       47

Неопределенное пятно вставляется после встраивания встроенного блоттинга в редактор Quill

0 голосов
/ 02 апреля 2020

Я работаю в твиттере, как упоминания пользователей для редактора 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 в редактор quill.

это событие клика, которое я написал для него. Здесь я заменяю текст, введенный пользователем после @ , на пользовательский встроенный блот. 

  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');

    });
  });
}

До этого момента все работает как шарм, но проблема, с которой я сталкиваюсь, возникает после вставки вставки usermention blot, если пользователь вводит Кнопка ввода вкл Клавиатура для go новой строки, срабатывает функция Quill handleEnter () и вставляет в редактор блот пользователя @ undefined .

После выполнения вышеупомянутой функции мой редактор имеет следующее состояние. Editor before hitting enter

Когда я нажимаю ввод для go новой строки, это состояние отладки функции handleEnter () - Quill

handleEnter() debugger state

@ undefined usermention вставлено в редактор. Я хочу, чтобы пользователь ввел новую строку.

@undefined in Quill editor

Когда пользователь нажимает Enter, я понял, что quill.format () возвращает usermention: true. Но если пользователь нажимает Enter после ввода еще нескольких символов, он переносит его на новую строку, и в этом случае quill.format () пуст.

Может кто-нибудь, пожалуйста, помогите мне в этом отношении. Спасибо.

1 Ответ

1 голос
/ 03 апреля 2020

Ссылка: https://quilljs.com/docs/modules/keyboard/

Обработка ввода с привязкой клавиатуры Quill проще, чем добавление в нее addLister. Приведенный ниже метод помогает вам обрабатывать всякий раз, когда событие ввода запускается в редакторе quill. 

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
    }
  }
};

Надеюсь, приведенный выше ответ соответствует вашим потребностям.

...