CKEditor 5 показывает элемент видео, но простой HTML, вставленный в div, не показывает элемент

Я создаю редактор уроков. Пользователь может редактировать контент (текст, видео, ссылки, изображения и т. д.) или просматривать конечный результат (отображенный HTML-код).

Редактор работает нормально, но когда я показываю обработанный html, связанные видео на YouTube не видны.

Это часть редактора, как вы можете видеть, ссылка на видео видна:

введите здесь описание изображения

И это «рендеринговая» версия; видео отсутствует (похоже не рендерит тег figure и тег oembed, но почему?):

введите здесь описание изображения

HTML-код:

<h2>This is the header of this section</h2>
<figure class="media">
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
</figure>

<p>Please let the student introduce himself.</p><blockquote><p>&nbsp; ‘I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. […]<br>‘Hi, Richard,’ she said, and spit out a mouthful of toothpaste. She was wearing cut-off jeans that had bizarre, frantic designs drawn on them in Magic Marker and a spandex top which revealed her intensely aerobicized midriff.<br>‘Hello,’ I said, setting to work on my tie.<br>‘You look cute today.’<br>‘Thanks.’<br>‘Got a date?’<br>I looked away from the mirror, at her. ‘What?’<br>‘Where you going?’<br>By now I was used to her interrogations.’ (pp. 51-52)</p></blockquote>

<figure class="media">
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9">
</oembed>
</figure>

reactjs javascript html ckeditor5
person devamat    schedule 02.08.2019    source источник
comment
Прочитайте этот ckeditor. com/docs/ckeditor5/latest/features/   -  person Jaspreet Singh    schedule 11.08.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вам необходимо обновить конфигурацию CKEditor для < href="https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html" rel="nofollow noreferrer">Media embed подключаемый модуль. При установке previewsInData в true создаваемый HTML функционально эквивалентен тому, что вы видите в CKEditor во время разработки.

Включите следующую строку в конфигурацию.

mediaEmbed: {previewsInData: true}

Если это не то, что вы ищете, вам нужно преобразовать вывод либо на стороне сервера, либо на стороне клиента, так как созданный HTML из CKEditor только выводит семантический вывод. В документации CKEditor рекомендуется использовать такие инструменты, как Iframely или Embedly, но вы можете сделать это в любое время. так, как вы хотите.

person Igor    schedule 10.11.2020