Quill(https://quilljs.com/)可以很容易地在网页中嵌入高质量的文本编辑器。在编辑器中粘贴html内容时,它会过滤粘贴的html,然后将其放入文本编辑器中。我的问题是:如何配置Quill以便它只在文本编辑器中粘贴纯文本?它会过滤掉所有标签并仅保留纯文本。
有关剪贴板模块(http://quilljs.com/docs/modules/clipboard/)的文档说,可以将自定义匹配器添加到剪贴板,这将过滤粘贴的文本。
我不知道如何编写只允许纯文本的匹配器。任何帮助和任何例子都非常感谢 - 谢谢!
经过反复试验,我找到了答案。以下匹配器将使编辑器仅粘贴纯文本:
quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
var plaintext = $ (node).text ();
return new Delta().insert (plaintext);
});
它使用jQuery。 :)
无法得到工作的答案。这是另一种修补剪贴板模块以仅接受纯文本的方法。
GitHub要点:
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)
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);
});