quill - 在 Quill 中删除内联格式

标签 quill

我在让removeFormat正常工作时遇到了一些问题。有趣的是,我以为几天前我就已经开始工作了;但现在当我检查时,发现不对。无论选择在哪里,它都会删除 block 级格式。一个简单的示例,使用 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”应用粗体并使整行成为 block 引用,则所有内容看起来都应该如此。如果我然后选择“Hello”并单击 X 按钮来删除格式,它会删除 block 引用格式,即使我离“\n”字符还很远。我是否误解了removeFormat,或者我创建BlockquoteBlot的方式是否有错误?我主要从 Quill 网站上的 Medium 演示中获取该代码,但我发现在某些情况下我需要专门定义范围,以便标签被识别为 block (这对于这个演示来说可能不是必需的,但我包括它以防出现问题)。

最佳答案

removeFormat 当前的工作方式确实会删除用户突出显示的所有 block 格式,即使它不跨过“\n”字符。当用户选择多行 Issue #649 时,这更有意义但当只有一行被部分选择时,也许它不应该以这种方式工作。我创建了一个Github Issue来讨论这个问题。请随意插话。

关于quill - 在 Quill 中删除内联格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39437723/

相关文章:

javascript - 在 React Quill 组件中允许标签

colors - Quill js 颜色文本框

meteor - 如何访问嵌套模板属性?

reactjs - React-Quill - 错误你很可能想要 `editor.getContents()`

php - 在表单中使用 Quill 并将数据传输到 mysql 数据库

javascript - Quill BlockEmbeds 可以使用任意标签吗?

quill - 为 Quill 印迹实现自定义编辑器

javascript - 如何用 Next.js 实现 Quill 或 Draft.js 等富文本编辑器?

angular - QuillJS 使用 Angular 7 + ngx-quill 将后续的 p 标签合并为一个

javascript - quill.formatText() 不允许嵌套格式