Серия статей «Umbraco: руководство контент-менеджера»

Редактор форматированного текста в CMS Umbraco 7 (продолжение)

Часть 7

Андрей Батурин, 01 мая, 2017

Евгений Бощенко

CMS Umbraco предоставляет очень широкий функционал редактора форматированного текста. На столько широкий, что это не уместилось в одной статье.

Продолжим знакомиться с возможностями этого редактора: сегодня рассмотрим действия с ссылками, изображениями и макросами.

Ссылки

Используйте кнопку Insert Link для добавления внутренних или внешних ссылок на страницу. Процесс вставки ссылки может отличаться от типа гиперссылки, которую вы хотите создать.

Для создания ссылки на другой сайт выполните следующие действия:

Выделите текст, который должен стать ссылкой.
Щёлкните на кнопку Insert Link, появится боковое меню.
В поле Ссылка на документ введите Url страницы, на которую необходимо сослаться.
В поле Заголовок страницы введите текст, который будет отображаться при наведении курсором на ссылку.
Поле Цель указывает на то, как должна быть открыта страница.
Нажмите Выбрать.

У поля Цель есть три возможных значения, а именно:

Opens the linked document in a new window or tab - открыть ссылку в новом окне или вкладке;
Opens the linked document in the full body of the window - открыть страницу в полный экран, игнорируя фреймы;
Opens the linked document in the parent frame - открыть страницу в родительском фрейме. Последние две опции поля Цель обычно не используются, так как на данный момент технология фреймов устарела.

Чтобы создать ссылку на страницу в Umbraco, необходимо проделать следующие шаги:

Выделите текст, который должен стать ссылкой.
Щёлкните на кнопку Insert Link, появится боковое меню.
Выберите страницу из древовидного представления внизу бокового меню. Вы также можете воспользоваться строкой поиска.
В поле Заголовок страницы введите текст, который будет отображаться при наведении курсором на ссылку.
Выберите необходимое значение в поле Цель.
Нажмите Выбрать.

Для создания ссылки на медиа-файл в Umbraco:

Выделите текст, который должен стать ссылкой.
Щёлкните на кнопку Insert Link, появится боковое меню.
Щелкните на кнопку Link to file в нижней части бокового меню.
Выберите необходимый материал в появившемся обозревателе медиа-файлов.
Выберите необходимое значение в поле Цель.
Нажмите Выбрать.

Если требуется создать ссылку на email адрес:

Выделите текст, который должен стать ссылкой.
Щёлкните на кнопку Insert Link, появится боковое меню.
В поле URL введите текст mailto: и адрес электронного почтового ящика (например name@company.ru).
В поле Заголовок страницы введите текст, который будет отображаться при наведении курсором на ссылку.
Выберите необходимое значение в поле Цель.
Нажмите Выбрать.

Ссылка на якорь на текущей странице

Якорь позволяет создать ссылку, которая направит пользователя на определенный участок текста на странице. Процесс создания делиться на две части: создание непосредственно якоря и ссылки на якорь.

Процесс создания якоря:

Установите курсор на том месте, куда необходимо установить якорь.
Щёлкните на кнопку Insert Link, появится боковое меню.
Выберите страницу из древовидного представления внизу бокового меню. Вы также можете воспользоваться строкой поиска.
В поле Заголовок страницы введите текст, который будет отображаться при наведении курсором на ссылку.
Выберите необходимое значение в поле Цель.
Нажмите Выбрать.

Для создания ссылки на якорь проделайте следующее:

Выделите содержимое, с которого необходимо сделать ссылку.
Щёлкните на кнопку Insert Link, появится боковое меню.
В поле Ссылка на документ введите знак решетки и имя якоря (например: #myanchor).
Нажмите Выбрать.

Если требуется сделать кликабельные картинки, то для создания ссылки с изображения:

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

В случае, если потребуется действие по удалению ссылки:

Выделите текст или изображение, с которого необходимо снять ссылку.
Щелкните по кнопку Remove Link. Или же нажмите кнопку Insert link и очистите поле Ссылка на документ.

Работа с изображениями

Для отображения изображений, они должны быть загружены в библиотеку медиа-материалов Umbraco. Процедура загрузки изображений может отличаться, в зависимости от вашей сборки. Некоторые изображения могут быть неизменяемые и "зашиты" в верстке.

Вставка изображений из библиотеки медиа-материалов делается следующим образом:

Установите курсор в место, куда необходимо добавить изображения.
Щёлкните на кнопку Media Picker на панели редактора форматированного текста.
Выберите папку с необходимым изображением и выберите файл.
Нажмите кнопку Вставить.

Вставка изображения с вашего ПК

Вы можете загружать изображения напрямую в редактор форматированного текста с вашего ПК. Загруженные файлы будут перемещены в библиотеку медиа-материалов Umbraco. Нажатие на кнопку [+] рядом с поисковой строкой для создания директории. Директории позволяют хранить медиа-файлы структурировано, что облегчает дальнейшую поддержку и обслуживание сайта.

Для этого проделайте следующие шаги:

Установите курсор в место, куда необходимо добавить изображения.
Щёлкните на кнопку Media Picker на панели редактора форматированного текста.
Щёлкните на кнопку Upload, которая находится в правой верхней части меню.
Нажмите кнопку Вставить.

Удаление изображение из содержимого

Для удаления изображения выделите его и нажмите клавишу Delete на клавиатуре. Изображение будет убрано из текста, но останется в библиотеке медиа-материалов.

Макросы

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

Для добавления макроса на страницу: