我正在调查 Quill 在项目中的使用，我需要知道是否可以创建比单个元素和单个参数更复杂的自定义格式/印迹。
我想要的布局之一的示例是：
<span class="format-container">
<span class="format-info" data-attr="param 1 (non-displayed)">
param 2 (displayed to user -- click to invoke application UI to edit)
</span>
<span class="format-content">
User's text/child elements go here
</span>
</span>
在我正在研究的所有情况下，自定义格式都属于内联范围，并且仍然具有单个父容器和用于放置子内容的单个位置。
Quill 中的自定义格式目前似乎没有很好的记录。我查阅了源代码，发现这在 0.20.1 中很可能是不可能的。然而，我觉得它可以在 1.0.0 beta w/ Parchment 中实现，我只是不确定我实际需要编写的具体内容。
那么这在 1.0.0 中可能吗？如果可以的话，怎么办呢？
EDIT: This is what I'm going for: 
所以，我最终想出了如何以最小的努力做到这一点。它涉及为 Quill 1.3 或更高版本定义新的印迹类型，相同的代码应该适用于旧版本，但未经测试。
请参阅代码片段以获取工作示例。关键是扩展现有的 Embed blot 'blots/embed' 并定义您自己的工具栏处理程序来注入任意 DOM 节点实例。
// utility function used to inherit non prototypical methods/properties
function extend(target, base) {
for (var prop in base) {
target[prop] = base[prop];
}
}
// definition of a custom Blot.
(function(Embed) {
'use strict';
function Span() {
Object.getPrototypeOf(Embed).apply(this, arguments);
}
Span.prototype = Object.create(Embed && Embed.prototype);
Span.prototype.constructor = Span;
extend(Span, Embed);
Span.create = function create(value) {
return value; // expects a domNode as value
};
Span.value = function value(domNode) {
return domNode;
};
Span.blotName = 'span';
Span.tagName = 'SPAN';
Span.className = 'complex';
Quill.register(Span, true);
})(Quill.import('blots/embed')); // import the embed blot. This is important as this is being extended
// custom handler for the toolbar button
var handler = function() {
var complexSpan = document.getElementById('complextype').firstElementChild.cloneNode(true);
var selection = quill.getSelection();
quill.insertEmbed(selection.index, 'span', complexSpan);
}
// instantiate quill. Note that modules.toolbar.handlers has a 'span' handler. Quill parses this from // the class on the button in the toolbar markup: 'ql-span' this is 'ql-' + blotName
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '.toolbar',
handlers: {
'span': handler
}
}
},
theme: 'snow'
});:root {
--complex-bgcolor: #767676;
--font-color: #FFFFFF;
}
html {
font-size: 10px;
}
button.ql-span {
width: 15rem !important;
}
.complex {
border-radius: 1rem;
border: 0.2rem solid black;
margin: 0.3rem;
}
.inner {
border-radius: 1rem;
background: var(--complex-bgcolor);
color: var(--font-color);
padding-left: 0.6rem;
padding-right: 0.6rem;
}
.formatting {
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.nested {
margin-left: 0.3rem;
margin-right: 0.3rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" />
<div id="wrapper">
<div id="toolbar" class="toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<button class="ql-span">Complex Span Type</button>
</span>
</div>
<div id="editor">Lorem Ipsum
<span contenteditable="false">
<span class="complex" spellcheck="false">
<span class="inner">Format applied</span>
<span class="nested">More text</span>
<span class="formatting">with formatting</span>
<span class="nested">dolor</span>
</span>
</span> sit amet
</div>
</div>
<div id="complextype" style="display:none;">
<span contenteditable="false"><span class="complex" spellcheck="false"><span class="inner">Format applied</span><span class="nested">More text</span><span class="formatting">with formatting</span><span class="nested">dolor</span></span></span>
</div>