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

【问题标题】：How to paste plain text in a Quill-based editor如何在基于 Quill 的编辑器中粘贴纯文本
【发布时间】：2016-12-20 08:06:19
【问题描述】：

Quill (https://quilljs.com/) 使在网页中嵌入高质量的文本编辑器变得简单。在编辑器中粘贴 html 内容时，它会过滤粘贴的 html，然后将其放入文本编辑器中。我的问题是：如何配置 Quill，使其仅在文本编辑器中粘贴纯文本？它会过滤掉所有标签，只留下纯文本。

关于剪贴板模块 (http://quilljs.com/docs/modules/clipboard/) 的文档说可以将自定义匹配器添加到剪贴板，这将过滤粘贴的文本。

我不知道如何编写一个只允许纯文本的匹配器。非常感谢任何帮助和任何示例 - 谢谢！

【问题讨论】：

标签： editor rich-text-editor quill

【解决方案1】：

经过反复试验，我找到了答案。以下匹配器将导致编辑器仅粘贴纯文本：

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

它使用 jQuery。 :)

【讨论】：

是否可以使用 removeFormat() 做同样的事情
@Natim 请尝试一下，会很棒:)
我会，但我很难从粘贴事件中得到的增量中找出范围。
为什么粘贴到 Natim 的示例 bbb 不起作用（我使用 ctrl+v）？它显示带有标签的字符串？

【解决方案2】：

无法获得工作的答案。这是另一种修补剪贴板模块以仅接受纯文本的方法。

GitHub 要点：

https://gist.github.com/prodrammer/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)

【讨论】：

PlainClipboard 中的 this.quill 是什么？如何在 PlainClipboard 中获取 this.quill？
继承自quill提供的Clipboard类。不确定这是否改变了。我使用 quill 版本 1.3.6。
@RyanHaney 我得到了 this.quill.getSelection() 的空值。知道可能是什么问题吗？
@susmitarai 您使用的是 quill 1.3.6 吗？我不确定如何让它在 quill 1.3.7 中工作。
你好@RyanHaney，我能够在编辑器中粘贴计划文本。但是每当我保存它时，文本都不会保存。似乎粘贴的内容在保存时没有与编辑器绑定

【解决方案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)
})

【讨论】：

【解决方案4】：

对于谷歌员工；

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

我想我把它贴在这里，这样其他人就不必挣扎了:)

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

【讨论】：