Я работаю в твиттере, как упоминания пользователей о редакторе 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');
});
});
}
Пока здесь все работает как шарм, но проблема, с которой я сталкиваюсь, возникает после вставки вставки usermention blot. Если пользователь нажимает кнопку Enter на клавиатуре, чтобы перейти на новую строку, Функция Quill handleEnter () запускается, и она вставляет в редактор сообщение @undefined usermention.
После выполнения вышеуказанной функции мое состояние редактора будет следующим.
Когда я нажимаю клавишу ВВОД, чтобы перейти к новой строке, это состояние отладки функции handleEnter () - Quill
В редактор добавлено @undefined usermention. Я хочу, чтобы пользователь ввел новую строку.
Когда пользователь нажимает Enter, я понял, что quill.format () возвращает usermention: true. Но если пользователь нажимает Enter после ввода еще нескольких символов, он переводит его на новую строку, и в этом случае quill.format () пуст.
Может ли кто-нибудь помочь мне в этом отношении. Спасибо.