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!

并将其格式化，如下所示：

_pretend这是（带下划线的（斜体（粗体）））一直到here_ 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
];

它有效！

QuillJS /羊皮纸：控制嵌套顺序？

1 个答案: