如何创建块级可编辑印迹？

Question

在常规编辑器中，您可以选择任何文本并将其标记为标题。我试图通过使用一流的标题污点完全替换此模式。因此，用户单击自定义的header1..header3按钮（甚至可以单独通过编程方式对其进行管理），然后插入带有可编辑标题的块级污点，该标题永远不能带有其他文本。删除文本后，污点应保留（因为用户无法删除标题）。

我该怎么做？

我从我的HeaderBlot天真地开始，如下：

export class HeaderBlot extends BlockEmbed {
    public static readonly blotName = 'header1';
    public static readonly tagName = 'h1';

    public static insert(quill: Quill) {
        const range = quill.getSelection(true);
        quill.insertEmbed(range.index, 'bookTitle', 'new header', 'user');
        quill.setSelection(range.index + 2, 0, 'silent');
    }
}

但是这会创建不可编辑的污点（空的h1标签），并且随后的所有其他按钮单击都会彼此相邻而不是作为一个新块来产生h1。

我猜我需要将h1样式设置为块级html元素。但这仍然给我留下了无法编辑的空h1标签。

Answer 1

这是您要实现的目标吗？

const Block = Quill.import('blots/block');

class CustomHeader extends Block {}
CustomHeader.blotName = 'custom-header';
CustomHeader.tagName = 'h1';

Quill.register('formats/custom-header' , CustomHeader);

// jQuery
$(document).ready(function () {
    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            'toolbar': '#toolbar'
        }
    });
});

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div id="toolbar">
  <div class="ql-formats">
    <button class="ql-custom-header">H</button>
  </div>
</div>
<div id="editor">Press enter and use the above button.</div>

提示：请记住，嵌入类型可以是内联或块类型，但不可编辑。

有关详细信息，请确保访问Quill's official website，其repository和this link，其中包含项目和答案的问题。