Как вставить курсор на нужную позицию в бэкспейс в гусиное перо? - PullRequest
Новая
       10

Как вставить курсор на нужную позицию в бэкспейс в гусиное перо?

0 голосов
/ 07 марта 2019

Я использую встроенное пятно упоминания в гусином пере, и при настройке выделения я использую код ниже, чтобы установить Выбор. 

this.quill.deleteText(this.mentionCharPos, this.cursorPos - this.mentionCharPos, Quill.sources.API); 
this.quill.insertText(this.mentionCharPos, mentionChar, "mention", render.id, Quill.sources.USER);
this.quill.insertText(this.mentionCharPos + name.length + 1, " ", 'mention', false, Quill.sources.USER);
this.quill.setSelection(this.mentionCharPos + name.length + 2, 0, Quill.sources.SILENT);

this.mentionCharPos -> @ position имя -> имя упоминания (например: сатья)

Когда текст был вставлен в редактор в то время, когда позиция курсора находится в нужном месте, когда я делаю клавишу Backspace, тогда сам курсор скрывался и, если дать место, он показывал в конце редактора.

Я также добавляю код моего блота для упоминания. 

import Quill from 'quill';

const Inline = Quill.import('blots/inline');


class MentionBlot extends Inline {
  static create(id) {
const node = super.create();
node.dataset.id = id;
node.setAttribute('contenteditable', true);
return node;
}

 static value(domNode) {
  return domNode.dataset;
}
 static formats(node) {
  return node.dataset.id;
 }
 format(name, value) {
  if (name === "mention" && value) {
      this.domNode.setAttribute("data-id", 
value);
  } else {
      super.format(name, value);
  }
}
 formats() {
   const formats = super.formats();
   formats['mention'] = 
   MentionBlot.formats(this.domNode);
  return formats;
  }
  }

  MentionBlot.blotName = 'mention';
  MentionBlot.tagName = 'span';
  MentionBlot.className = 'mention';

  Quill.register({
  'formats/mention': MentionBlot
  });

Как показать правильную позицию курсора и еще одну вещь, если я сделаю contenteditable истинным, он работает нормально. Когда я даю contenteditable как ложное, я сталкиваюсь с этой проблемой.

https://www.dropbox.com/s/6kmmmy1gsidggxt/Screen%20Recording%202019-03-07%20at%2010.08%20AM.mov?dl=0

1 Ответ

0 голосов
/ 21 марта 2019

Я нахожу решение, вставьте пробел после вставки упоминания: 

insertEmbed(range.index, 'mention', value, 'user');
insertText(range.index + 1, "\u00a0", 'user');

Все нормально.

...