首页 文章

删除Quill中的内联格式

提问于
浏览 次
1

我在使用removeFormat工作时遇到了一些麻烦 . 有趣的是，我以为我几天前就有这个工作了;但现在当我检查它时，它是不对的 . 无论选择在何处，它都会删除块级格式 . 一个简单的例子，使用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”并使整行成为一个blockquote，则所有内容都应该如此 . 如果我然后选择“Hello”并单击我的X按钮以删除格式，它会删除blockquote格式，即使我没有接近“\ n”字符 . 我是否误解了removeFormat，或者我是如何创建BlockquoteBlot的？我主要从Quill网站上的Medium演示中获取该代码，但我发现在某些情况下我需要专门定义范围，以便将标记识别为块（这可能不是此演示所必需的，但我是包括它以防它出现问题） .

quill

2 回答

  • 1

    removeFormat 当前的工作方式确实会删除用户突出显示的所有块格式，即使它不在"\n"字符上 . 当用户选择多行Issue #649时，这更有意义，但是当只有一行选择时，它可能不会以这种方式工作 . 我创建了Github Issue来讨论这个问题 . 请随意加入 .

    回复于
  • 1

    我知道这是一个旧线程 - 作为你的代码的附加，以防有人没有选择任何东西 - 适用于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);
    }
  });
    回复于

相关问题