quill.formatText() не допускает вложенных форматов

Question

Я использую quill.formatText(), чтобы добавить пользовательский формат «выделить» в текстовый редактор. Я протянул блоттинга, как так:

let Inline = Quill.import('blots/inline'); 
class highlight extends Inline { 
    static create() { 
     return super.create(); 
    } 

    static formats() { 
     return true; 
    } 
} 
highlight.blotName = 'highlight'; 
highlight.className = 'highlight'; 
highlight.tagName = 'span'; 
Quill.register(highlight); 

Я тогда называть quill.formatText(start, selectionLength, 'highlight', true);, который оборачивает мой выбор в <span class="highlight"> теге. Все идет нормально.

Проблема в том, что я хочу, чтобы каждый выбор был обернут в свой собственный тег span. Когда я делаю два выбора текста, один внутри другого, остается только внешний span.

Например, с текстом test inside text. Если я выделить всю строку в дополнение к только слова inside, я бы ожидать, чтобы получить:

<span class="highlight">Test <span class="highlight">inside</span> text</span>

В то время как я на самом деле получить:

<span class="highlight">Test inside text</span>

Похоже, это оптимизация, которую QuillJS делает за кулисами - есть ли все-таки я могу отключить ее, чтобы я мог хранить как вложенные span?

Answer 1

Вместо того, чтобы сделать формат true или false, попробуйте сделать его своего рода идентификатором, который идентифицирует прецедент. Затем вы можете добавить атрибут данных в диапазон для хранения идентификатора или создать уникальный класс, как в ваших комментариях.

Вы можете найти эту Толкай запрос на перу полезной в получении решения, которое будет работать для вас (или просто использовать этот код непосредственно)

https://github.com/quilljs/quill/pull/1217

Answer 2

Это не просто оптимизация - это необходимо для гарантии детерминизма. Если у вас есть текст «Тест внутри текста» и говорят, что он выделен полужирным шрифтом, Quill гарантирует, что вывод <strong>Test inside text</strong>, а не <strong>Test inside </strong><strong>text</strong> или <strong>Test <strong>inside</strong> text</strong> или бесконечное количество вариантов права HTML.

Quill спроектирован так, чтобы быть однозначным, чтобы вы могли либо устранить двусмысленность от своего дизайна, либо использовать редактор, который позволяет это.