Как вставить в текстовый ввод, содержащийся в пользовательской пятне Quill Embed?

Я успешно использовал Quill для создания пользовательского блота, расширяющего Embed блот. Мое пятно содержит поле для ввода текста и кнопку.

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

Я знаю, что модуль буфера обмена обрабатывает вставку, и я просмотрел этот модуль, но не знаю, что делать дальше.

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

Моя первоначальная мысль - зарегистрировать мой собственный расширенный модуль буфера обмена и выполнять там обнаружение. Однако я не уверен, как указать буферу обмена, чтобы он отключился и разрешил выполнение нормального поведения при вставке.

Любое руководство приветствуется!


quill
person pkbool    schedule 10.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Вот что я использовал:

import Quill from 'quill'
const QuillClipboard = Quill.import('modules/clipboard')

export default class Clipboard extends QuillClipboard {
  onPaste (event) {
    // Contenteditables, inputs and textarea are embeded into rich elements
    // Do not capture the copy paste with Quill
    if (['DIV', 'INPUT', 'TEXTAREA'].indexOf(event.target.nodeName) !== -1) {
      return
    }

    super.onPaste(event)
  }
}

Quill.register('modules/clipboard', Clipboard, true)
person guillaumepotier    schedule 11.05.2018
comment
Большое спасибо! Это сработало, как и ожидалось. Вот обновленный код вашего решения: codepen.io/paulkoanui/pen/GddGve - person pkbool; 12.05.2018