QuillJS/羊皮纸 : Controlling Nesting Order?

Question

我正在使用 QuillJS 和 Parchment，到目前为止我很喜欢它!

也就是说，我遇到了一个小烦恼，我希望有人知道答案。 (我梳理了文档、问题、疑问，甚至还研究了源代码 - 尝试在此处询问之前进行尽职调查!)

有什么方法可以隐式或显式控制格式化标签的应用顺序吗？

---

例如，假设您访问 QuillJS Playground并粘贴文本:

A (bold (italic (underlined))) move!

甚至将其格式化为如下所示:

一个(粗体(斜体_(假装这是下划线)_))移动!

标记将是这样的:

<p>A <strong>(bold <em>(italic <u>(underlined)</u>)</em>)</strong> move!</p>

漂亮的小标签嵌套。请注意，应用格式的顺序并不重要 - 它总是会产生相同的标记。

---

如果您转至 QuillJS Playground并粘贴文本:

An (underlined (italic (bold))) move!

并格式化它，使其看起来像这样:

_假装这是(下划线(斜体(粗体)))一直到这里_移动!

标记将是这样的可怕的东西:

<p>An <u>(underlined </u>
<em><u>(italic </u></em>
<strong><em><u>(bold)</u></em></strong><em><u>)</u></em>
<u>)</u> move!</p>

它遵循与第一个示例相同的嵌套顺序( <u> 始终在 <em> 始终在 <strong> 内部)，这太棒了!碰巧的是，我们的文本的堆叠顺序恰好迫使它笨拙地嵌套。

---

我问的原因是因为我正在定义一个自定义内联印迹 <figcaption>我更希望我的标记看起来像这样:

<figcaption>A <strong>bold</strong> move!</figcaption>

而不是这个:

<figcaption>A </figcaption>
<strong><figcaption>bold</figcaption></strong>
<figcaption> move!</figcaption>

---

有什么想法吗？有建议吗？

感谢您的宝贵时间!

Answer 1

发现了!

我进一步挖掘了 QuillJS 源代码，并偶然发现了这个人:

https://github.com/quilljs/quill/blob/develop/blots/inline.js#L44

// Lower index means deeper in the DOM tree, since not found (-1) is for embeds
Inline.order = [
  'cursor', 'inline',   // Must be lower
  'code', 'underline', 'strike', 'italic', 'bold', 'script',
  'link'                // Must be higher
];

内联元素的嵌套顺序由该数组控制。给定两种格式(例如，'bold' 和 'underline')，'underline' 将始终嵌套在 'bold 内' 因为它首先出现在 Inline.order 中。同样，'link' 将始终包围 'bold'，因为 'link' 按此顺序出现在粗体之后。

为了解决我的问题，我将 Inline.order 重写为相同的内容，但在数组末尾包含了我的 'caption' blotName:

// Lower index means deeper in the DOM tree, since not found (-1) is for embeds
Inline.order = [
  'cursor', 'inline',   // Must be lower
  'code', 'underline', 'strike', 'italic', 'bold', 'script',
  'link', 'caption'     // Must be higher
];

它成功了!