Как вставить обычный текст в редакторе на основе Quill

Question

Quill ( https://quilljs.com/) позволяет легко встроить качественный текстовый редактор в веб-страницу. При вставке html-содержимого в редактор он фильтрует вставленный html и затем помещает его в текстовый редактор. Мой вопрос: как я могу настроить Quill, чтобы он вставлял только текст в текстовом редакторе? Это отфильтровывает все теги и оставляет только простой текст.

Документация о модуле буфера обмена ( http://quilljs.com/docs/modules/clipboard/) гласит, что в буфер обмена можно добавлять собственные сопоставители, которые будут отфильтровывать вставленный текст.

Я не знаю, как написать сопоставление, которое позволяет только простой текст. Любая помощь и любые примеры очень ценятся - спасибо!

Answer 1

После проб и ошибок я нашел ответ. Следующее совпадение приведет к тому, что редактор будет вставлять только простой текст:

quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
    var plaintext = $ (node).text ();
    return new Delta().insert (plaintext);
});

Он использует jQuery.:)

Answer 2

Не могу получить ответ на работу. Вот еще один метод, который исправляет модуль буфера обмена, чтобы принимать только простой текст.

GitHub Gist:

https://gist.github.com/ryanhaney/d4d205594b2993224b8ad111cebe1a13

Реализация буфера обмена:

import Quill from 'quill'
const Clipboard = Quill.import('modules/clipboard')
const Delta = Quill.import('delta')

class PlainClipboard extends Clipboard {
  onPaste (e) {
    e.preventDefault()
    const range = this.quill.getSelection()
    const text = e.clipboardData.getData('text/plain')
    const delta = new Delta()
    .retain(range.index)
    .delete(range.length)
    .insert(text)
    const index = text.length + range.index
    const length = 0
    this.quill.updateContents(delta, 'silent')
    this.quill.setSelection(index, length, 'silent')
    this.quill.scrollIntoView()
  }
}

export default PlainClipboard

Пример использования:

import Quill from 'quill'
import PlainClipboard from './PlainClipboard'

Quill.register('modules/clipboard', PlainClipboard, true)

Answer 3

Обновленное решение teusbenschop - работает без jQuery, а также исправляет проблему с отсутствующим объектом Delta.

    quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
        var plaintext = node.innerText;
        var Delta = Quill.import('delta');
        return new Delta().insert(plaintext);
    });

Answer 4

Для гуглеров;

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

Я думал, что выложу это здесь, чтобы другим не пришлось бороться:)

https://www.npmjs.com/package/quill-paste-smart

Answer 5

      import Quill from 'quill';

quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
  const plaintext = node.innerText
  const Delta = Quill.import('delta')
  return new Delta().insert(plaintext)
});