Как сделать отдельно каждый элемент - PullRequest
Новая
       9

Как сделать отдельно каждый элемент

0 голосов
/ 19 апреля 2019

Как я могу разделить каждый элемент? В настоящее время каждый элемент объединен в один <span> элемент 

<span style="font-family:wingdings;">.4=??????</span>
<span style="font-family:symbol;">QPGH</span>

это генерируется кодом ниже 

import Command from '@ckeditor/ckeditor5-core/src/command';

export default class SymbolsCommand extends Command {
  execute({ charButtons }) {
    const { model } = this.editor;

    model.change((writer) => {
      const { selection } = model.document;
      const position = writer.createPositionAt(selection.getFirstPosition());
      console.log(charButtons, 'charButtons');

      const renderChars = () => charButtons.map(({ fontFamily, char }) => {
        writer.insertText(char, { fontFamily }, position);
      });
      return renderChars();
    });
  }

  refresh() {
    this.isEnabled = true;
  }
}

Я ожидаю, что результат будет 

<span style="font-family:wingdings;">=</span>
<span style="font-family:wingdings;">?</span>
<span style="font-family:wingdings;">4</span>
<span style="font-family:symbol;">4</span>
<span style="font-family:symbol;">4</span>
...

1 Ответ

2 голосов
/ 23 апреля 2019

Присоединение к подобным <span> s является поведением CKEditor 5 по умолчанию.Одна из причин заключается в том, что эти символы также объединены в модели данных и представлены одним текстовым узлом.Не имеет значения, вставляете ли вы эти символы один за другим или все сразу, если у них одинаковые атрибуты, они сгруппированы вместе.

Один из способов предотвратить это - указать view.AttributeElement # идентификатор .Это, к сожалению, более сложная тема.Помимо прочего, вам нужно будет предоставить конвертеры, которые будут создавать элементы атрибутов в представлении.

Я думаю, что есть два способа достичь вашей цели, оба потребуют от вас добавить конвертер вместо того, чтобы полагаться на fontFamilyконвертер из плагина семейства шрифтов (я предполагаю, что это происходит здесь).

Использование атрибута в тексте с уникальным AttributeElement # id для предотвращения присоединения <span> s

Первое решение состоит в том, чтобы ввести новый атрибутдля текста (помните о расширении схема ) и предоставьте конвертер для него.Давайте назовем ключ атрибута symbol.

. Конвертер должен будет преобразовать заданный текстовый узел символьно-символьно и установить уникальный идентификатор для каждого созданного диапазона атрибута.

Это более сложное решение, хотя, возможно, и лучшее. 

editor.model.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'attribute:symbol', ( evt, data, conversionApi ) => {
        // Provide your converter here. It should take `data.item`, iterate
        // through it's text content (`data.item.data`), use
        // `conversionApi.writer` to create attribute elements with unique ids
        // and use the writer and `conversionApi.mapper` to place them in the view.
    } );
} );

Вы можете основать преобразователь на function wrap с downcasthelpers.js в двигателе: https://github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js.

Вставка символов в виде встроенных элементов

Другим решением будет вставка элементов с символами вместо просто текстовых узлов.

В этом случае, опять же, вы должны указать новую модельэлемент в схеме.Возможно расширение элемента '$text'.

Для конвертации вы можете использовать elementToElement помощников из editor.conversion.for().Для downcast вы должны будете указать view в качестве обратного вызова и установить уникальный идентификатор (уникальные идентификаторы могут быть просто счетчиком, увеличиваемым на единицу каждый раз).Если elementToElement не будет работать для downcasting (он должен работать для upcast), вам нужно будет предоставить специальный конвертер через .for( 'downcast' ).add( ... ).

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

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

...