我在让 removeFormat 正常工作时遇到了一些麻烦。有趣的是,我以为我几天前就开始工作了;但是现在当我检查它是不对的。无论选择在哪里,它都会删除块级格式。一个简单的示例,使用 Quill 快速入门并进行一些修改:
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
let Block = Quill.import('blots/block');
let Parchment = Quill.import('parchment');
class BlockquoteBlot extends Block { }
BlockquoteBlot.scope = Parchment.Scope.BLOCK;
BlockquoteBlot.blotName = 'blockquote';
BlockquoteBlot.tagName = 'blockquote';
Quill.register(BlockquoteBlot);
let quill = new Quill('#editor');
$('#italic-button').click(function() {
quill.format('italic', true);
});
$('#bold-button').click(function() {
quill.format('bold', true);
});
$('#blockquote-button').click(function() {
quill.format('blockquote', true);
});
$('.cust-clear').click(function(ev) {
var range = quill.getSelection();
quill.removeFormat(range.index, range.length);
});
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Create the toolbar container -->
<div id="toolbar">
<button id="bold-button" class="ql-bold">Bold</button>
<button id="italic-button" class="ql-italic">Italic</button>
<button id="blockquote-button" class="ql-blockquote">Blockquote</button>
<button class="cust-clear" title="Clear Formatting">X</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
在这个例子中,如果我对“Hello”应用粗体并使整行成为块引用,所有看起来都应该如此。如果我然后选择“Hello”并单击我的 X 按钮来删除格式,它会删除块引用格式,即使我离“\n”字符还很远。我是否误解了 removeFormat,或者我创建 BlockquoteBlot 的方式是否有错误?我主要从 Quill 网站上的 Medium 演示中获取该代码,但我发现在某些情况下,我需要专门定义范围,以便将标记识别为块(这对于本演示可能不是必需的,但我包括它以防出现问题)。