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

对于Google员工；

我创建了一个Quill插件，该插件删除了所有不支持的标签和属性。除非另有配置，否则它会通过查看工具栏模块来检测到这一点。

我以为我将其张贴在这里，这样其他人就不必挣扎了：）

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

Answer 4

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

如何在基于Quill的编辑器中粘贴纯文本

4 个答案: