Как пройти текст CKEditor5 и изменить атрибуты некоторых его частей? - PullRequest
Новая
       13

Как пройти текст CKEditor5 и изменить атрибуты некоторых его частей?

0 голосов
/ 24 сентября 2019

Я упросту свой вариант использования для вопроса.Допустим, у меня есть текст с несколькими абзацами, и я хочу, чтобы при нажатии на кнопку все было выделено жирным шрифтом #.

Пример:

Lorem # ipsum #dolor # sit # amet

Consectetur adipiscing elit.

Cras # efficitur # Velit

Будет "преобразован" в это:

Lorem # ipsum # dolor # sit # amet

Consectetur adipiscing elit.

Cras # efficitur # Velit

У меня уже есть логика пользовательского интерфейса, кнопка на моей странице, которая запускает пользовательскую команду Ckeditor.

Моим первым предположением было перебирать абзацы, а затем через элементы внутри id, как это: 

    execute( options ) {
    const { editor } = this;
    const root = editor.model.document.getRoot();
    const paragraphs = Array.from( root.getChildren() );
    paragraphs.forEach( paragraph => {
        const content = Array.from( paragraph.getChildren() );
        content.forEach( element => {
            editor.model.change( writer => {
                const range = /** Create range between # */
                writer.setSelection( range );
                writer.setSelectionAttribute( 'bold', true );

            } );
        } );
    } );
}

Но я не знаю лучшего способа выбора контента внутри #.Я попытался поиграть с выделением, например, выбрав первый контент с помощью: 

const positionStart = editor.model.createPositionBefore(element);
const positionEnd = editor.model.createPositionAfter(element);
editor.model.change(writer => {
  const range = writer.createRange(positionStart, positionEnd);
  writer.setSelection(range);
  writer.setSelectionAttribute('bold', true);
});

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

const positionStart = editor.model.createPositionBefore( element );
const positionEnd = editor.model.createPositionAfter( element );
editor.model.change( writer => {
  const range = writer.createRange( positionStart, positionEnd );
  writer.setAttribute( 'bold', true, range );
} );

Но я не знаю, как создать диапазон внутри содержимого.content в этом случае: 

<TextNode>Lorem #ipsum# dolor #sit# amet</TextNode>

Так что мне нужно создать 2 диапазона "внутри" него: 

<TextNode>Lorem #[ipsum]# dolor #[sit]# amet</TextNode>

и затем использовать writer.setAttribute(...

Может мне стоит использовать SplitOperation ?Или, может быть, я не правильно использую выбор / диапазоны.

...