Вставьте HTML, используя функции Writer.insert * в CKEditor 5 - PullRequest
Новая
       13

Вставьте HTML, используя функции Writer.insert * в CKEditor 5

0 голосов
/ 26 апреля 2018

Я вижу, что у класса Writer есть методы для вставки текста. Однако я не понимаю, какой из этих методов является правильным для вставки HTML в редактор.

Пояснения

Мой сценарий: Пользователь может создать определенный шаблон контента и сохранить его. Позже пользователь сможет вставить этот же контент в редактор и начать модификацию.

Я обрабатываю это, используя следующий код 

activeCKE.model.change( writer => {
    writer.insertElement( "text to insert", activeCKE.model.document.selection.getFirstPosition() );
    activeCKE.setData(activeCKE.getData()); // to refresh the contents

}

Хорошо работает с "** text **", но не с "<strong>text</strong>". Последний выглядит как есть.

Итак, мой вопрос; Как правильно вставлять строку HTML программно, которая уже была создана с использованием чего-то вроде Writer класса?

Я вижу, что в ui/template есть концепция шаблона, однако мне неясно, как конвертировать editor.getData() в этот шаблон.

Обратите внимание: Я не хочу предоставлять пользователю интерфейс редактирования HTML. Я просто хочу создавать шаблоны, чтобы сделать его жизнь проще. Следовательно, мой вопрос не имеет ничего общего с вопросами «Просмотр исходного кода».

1 Ответ

0 голосов
/ 26 апреля 2018

Продолжая исследование, задавая этот вопрос, я получил ответы на часто задаваемые вопросы, где получил свой ответ. 

const viewFragment = activeCKE.data.processor.toView( "<p>HTML Text</p>" );
const modelFragment = activeCKE.data.toModel( viewFragment );

activeCKE.model.insertContent( modelFragment, activeCKE.model.document.selection );

Это удовлетворяет моему варианту использования. Тем не менее, я призываю сообщество опубликовать другие возможные варианты, такие как использование класса Template. Тем более, что разрывы строк из-за тегов любого типа (br, p и т. Д.) Отфильтровываются.

Разработчики, заинтересованные в отображении исходного кода и разрешении манипулирования исходным кодом в CKEditor 5 , могут создать плагин, который отображает содержимое editor.getData() в диалоговом окне (или что-то, что им нравится), а затем сбросить содержимое редактора и вставьте его так, как показано выше.

...