QuillJS/Parchment: управление порядком вложения?

Я использую 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>

Любые идеи? Предложения?

Спасибо за ваше время!


quill
person Percipient24    schedule 06.04.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Эврика!

Я еще немного покопался в исходниках 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' имя_блота в конец массива:

// 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
];

И это сработало!

person Percipient24    schedule 11.04.2017