Значение Quill Wrap Blot с дочерним блотом - PullRequest
Новая
       6

Значение Quill Wrap Blot с дочерним блотом

0 голосов
/ 02 апреля 2020

Я хочу по умолчанию для всего текста использовать стиль шрифта Arial и размер шрифта 12px.

Если я установлю их в качестве значения по умолчанию для панели инструментов, пользовательский интерфейс панели инструментов не изменится на цвет, указывающий на то, что вы находитесь (например, если я наведу курсор на какой-то текст, стилизованный под 15px и Geneva, пользовательский интерфейс для средства выбора шрифта и размера будет синим. Но если я по умолчанию выберу 15 и Женева, тогда всякий раз, когда я помещаю свой курсор в какой-то текст, стилизованный таким образом, он просто переключается на него, но пользовательский интерфейс не будет иметь такого цвета подсветки).

Чтобы обойти это, я просто не хочу установить по умолчанию. Это прекрасно работает, за исключением случаев, когда я читаю некоторые устаревшие значения из базы данных. Эти устаревшие значения будут выглядеть примерно так: 

<p> This is legacy text </p>

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

Итак, в идеале я бы хотел, чтобы Quill преобразовал его в: 

<p>
  <span class="ql-font-arial" style="font-size: 12px;">This is legacy text.</span>
</p>

Но я не могу заставить Quill принять дочерний узел при создании блота. Если я добавлю ребенка, он будет оптимизирован, потому что у этого ребенка не будет контента. Если я добавляю дочерний узел и возвращаю дочерний узел, родительский узел никогда не распознается Quill и не появляется в стилевом оформлении (и помещает все в одну строку, поскольку теперь это всего лишь один гигантский оптимизированный тег span.)

Есть ли способ заставить блот использовать сам формат, чтобы иметь дочерний элемент и вставить данные в дочерний элемент? Это то, что я сейчас использую, чтобы захватить теги

и сохранить любое возможное форматирование выравнивания. Но я не могу понять, как сделать так, чтобы данные по умолчанию были обернуты в дочерний тег <span>. 

const BlockBlot = Quill.import('blots/block');

export class PBlot extends BlockBlot {
  static create(data: { alignment: string }) {
    let node: Element = document.createElement('P');
    if (data && data.alignment) {
      node.setAttribute('class', `ql-align-${data.alignment.toLowerCase()}`);
    }
    let sNode = document.createElement('SPAN');
    node.appendChild(sNode);
    //return sNode;
    return node;
  }

  static formats(node: Element) {
    return { alignment: node.getAttribute('align') || undefined };
  }
}
PBlot.tagName = 'P';
PBlot.blotName = 'block';
...