在 Quill 中删除内联格式

Question

我在让 removeFormat 正常工作时遇到了一些问题。有趣的是，我以为我几天前就开始工作了；但现在当我检查它时，它是不对的。无论 selection 在哪里，它都会删除块级格式。一个简单的示例，使用 Quill Quickstart 并进行一些修改：

  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" 并将整行设为块引用，则一切看起来都应该如此。如果我然后 select "Hello" 并单击我的 X 按钮以删除格式，即使我离“\n”字符不远，它也会删除块引用格式。我是不是误解了 removeFormat，还是我创建 BlockquoteBlot 的方式有误？我主要从 Quill 网站上的 Medium 演示中获取了该代码，但我发现在某些情况下我需要专门定义范围，以便将标签识别为块（对于此演示可能不是必需的，但我包括它以防出现问题）。

Answer 1

removeFormat 目前的工作方式确实删除了用户突出显示的所有块格式，即使它没有跨越“\n”字符。当用户选择多行 Issue #649 but perhaps it should not work this way when there is only one line partially selected. I've created a Github Issue 来讨论时，这更有意义。请随时插话。

Answer 2

我知道这是一个旧线程 - 作为您的代码的补充，以防有人没有选择任何东西 - 适用于 Quilljs 1.2.6

 $('.cust-clear').click(function(ev) {
    var range = quill.getSelection();
    if (range.length ===0) {
      let leaf, offset = quill.getLeaf(range.index);
      quill.removeFormat(range.index - offset, range.index + leaf.domNode.length);
    } else {
       quill.removeFormat(range.index, range.length);
    }
  });

Answer 3

这应该有效

$('.cust-clear').click(function() 
{
    var range = editor.getSelection();
    if (range){
        if (range.length > 0) {
            editor.removeFormat(range, Quill.sources.USER);
        }
    }
});

在 Quill 中删除内联格式

Removing inline formats in Quill

quill