bctos-rich-text: демонстрация обогащённого текста с видео

Из обогащённого текстового контента извлекаются видео и другой контент, которые затем отображаются с помощью компонентов video и rich-text. Видео также будет отображаться в исходном положении в обогащённом тексте, не нарушая порядок отображения контента и обеспечивая согласованность эффекта отображения с редактированием на бэкенде.

Редактор на бэкэнде

Если вы используете uniCloud Admin Framework или другую платформу разработки uni-app, рекомендуется использовать плагин bctos-editor для редактирования обогащённого текста. Он основан на tinymce и добавляет функцию загрузки локального видео.

Поскольку оригинальный редактор tinymce поддерживает только ввод URL-адресов видео, а в Китае практически нет бесплатных платформ для загрузки видеофайлов с получением реальных URL-адресов, bctos-editor предоставляет функцию загрузки видео непосредственно в бесплатное облачное хранилище uniCloud, избавляя от необходимости беспокоиться о разработке бэкенда.

Самое главное, что bctos-rich-text может хорошо анализировать информацию о видео, сохранённую редактором bctos-editor.

Способ установки

Этот компонент соответствует стандарту easycom. Начиная с HBuilderX 2.5.5, его можно просто импортировать в проект, и он будет готов к использованию без необходимости импорта и регистрации компонентов на странице.

Основное использование

После настройки свойства nodes компонент автоматически отображает видео и другой графический контент на основе данных. В настоящее время параметр nodes поддерживает только формат HTML String и не поддерживает формат массива rich-text Array.

<template>
	<view>
		<bctos-rich-text :nodes="content"></bctos-rich-text>
	</view>
</template>

export default {
	data() { 
		return {
			content: `<p>Здесь находится абзац один, ниже размещено первое видео.</p><br>
			<p><video controls="controls">
			<source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-042c6b2e-63dd-4fe1-b729-b6327b68450a/d906ba15-9041-4137-bc3f-44a413c855e0.mp4" type="video/mp4" /></video></p><br>
			<p>Здесь находится абзац два, ниже размещено второе видео.</p><br>
			<p><video controls="controls">
			<source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-042c6b2e-63dd-4fe1-b729-b6327b68450a/ae4a89d7-5c7e-48d2-b6f9-0da5c848bbda.mp4" type="video/mp4" /></video></p><br>
			<p>Далее больше контента...</p>`,
		}
	}
}

Настройка ширины видео

По умолчанию видео отображается на мобильном устройстве с шириной 100%. Если вы хотите настроить ширину, вы можете установить параметр width, например:

<bctos-rich-text :nodes="content" width="300px"></bctos-rich-text>

API

Свойства bctos-rich-text Props

Часто задаваемые вопросы

Формат HTML для видео должен соответствовать следующему формату: начинаться с <video, иметь атрибут src с реальным адресом видеофайла и заканчиваться на </video>.

Например, следующие форматы могут быть правильно проанализированы:

<video src="URL видео"></video>
<video controls="controls"><source src="URL видео" type="video/mp4" /></video>

Следующие форматы не могут быть проанализированы правильно:

<!--Завершение без `</video>`-->
<video src="URL видео" />

<!--Отсутствие атрибута `src` в середине-->
<video data-src="URL видео"></video>

Дополнительная помощь

Для расширения других функций, пожалуйста, свяжитесь с нами для индивидуальной разработки: QQ: 203163051