Меню «Вставить» редактора TinyMCE 4

С помощью меню "Вставить" Вы можете использовать в тексте изображения, видео, специальные символы и многое другое.


Меню Вставить

Вставить изображение

Вы можете вставить в текст иллюстрацию, указав адрес изображения. Кроме того, Вы можете задать для такого изображения ряд настроек: размер, альтернативное название, описание, выравнивание и пр.

Рассмотрим, как это можно сделать.

Шаг 1

В меню "Вставить" выберите пункт "Вставить изображение".


Пункт меню Вставить изображение

Шаг 2

Откроется окно вставки изображения - вкладка "Общее". Сперва в поле "Источник" укажите адрес (URL) картинки.


Пункт меню Вставить изображение

Шаг 3

Укажите в поле "Описание" какое-либо примечание о сути изображения - это полезно для "восприятия" Вашего сайта поисковиками. Также описание отображается при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление о его содержании. Данное поле соответствует атрибуту "alt".


Пункт меню Вставить изображение

Шаг 4

В поле "Заголовок" укажите альтернативное название для изображения - оно будет всплывать при наведении курсора на иллюстрацию.


Пункт меню Вставить изображение

Вставить видео

Текстовый редактор позволяет использовать видео и при необходимости настраивать его - указывать альтернативные источники, размеры и пр.

Стоит отметить, что для корректной работы в качестве источников рекомендуется использовать ссылки именно на видео.

Ниже Вы можете ознакомиться с инструкцией - как вставить видео в текстовом редакторе.

Шаг 1

В меню "Вставить" выберите пункт "Вставить видео".


Пункт меню Вставить изображение

Шаг 2

В поле "Источник" укажите адрес видео, которое Вы хотите вставить.


Пункт меню Вставить изображение

Шаг 3

В поле "Альтернативный источник" Вы можете указать адрес видео, которое будет использоваться в случае, если браузер не будет поддерживать формат основного видео из поля "Источник".


Пункт меню Вставить изображение

Шаг 4

Укажите в поле "Изображение" адрес картинки, которая будет использоваться в случаях, когда браузер не будет поддерживать формат ни одного видео из источников. Также картинка из этого поля будет выводиться пока видео загружается.


Пункт меню Вставить изображение

Шаг 5

Далее - задайте размер видео - ширину и высоту в пикселах.


Пункт меню Вставить изображение

Если при этом Вы отметите галочку "Сохранять пропорции", при изменении одной величины - вторая будет пропорционально изменяться автоматически.

Шаг 6

Также, если у Вас есть код видео, которое Вы хотите вставить, Вы можете сделать это в соседней вкладке "Код для вставки". Там же Вы можете подкорректировать параметры уже заданного видео - добавить какие-либо рамки и пр.


Пункт меню Вставить изображение

Шаг 7

После внесения всех изменений нажмите "Ок".


Пункт меню Вставить изображение

Альтернативный способ

Вы можете вставить видео (или отредактировать уже вставленное) с помощью кнопки в рабочей области текстового редактора:


Пункт меню Вставить изображение

Вставить ссылку

Вы можете вставить ссылку в текст и задать ее параметры.

При необходимости - выделите сперва текст, который хотите использовать в качестве ссылки.

Или же - задайте этот текст непосредственно во время вставки и настройки ссылки.

Шаг 1

В меню "Вставить" нажмите на пункт "Вставить ссылку".


Пункт меню Вставить изображение

Шаг 2

Откроется окно параметров ссылки - вкладка "Общее". Сперва укажите адрес ссылки.


Пункт меню Вставить изображение

Шаг 3

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


Пункт меню Вставить изображение

Шаг 4

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


Пункт меню Вставить изображение

Шаг 5

Также можно задать параметр "Rel" для ссылки - он определяет, чем является страница, открываемая по ссылке, для текущей страницы (страницы, на которой располагается ссылка).

  • Lightbox – изображение, открываемое в окне просмотра;
  • Alternate – другая версия документа;
  • Designates – список обозначений;
  • Stylesheet – таблица стилей в виде файла (CSS);
  • Start – стартовая страница;
  • Next - следующая страница;
  • Prev - предыдущая страница;
  • Contents – страница с содержанием;
  • Index – алфавитный указатель (оглавление);
  • Glossary – словарь терминов;
  • Copyright – информация об авторких правах;
  • Chapter – глава документа;
  • Subsection – подраздел;
  • Appendix - приложение;
  • Help – справочные данные;
  • Bookmark – закладка внутри документа;
  • Nofollow – параметр для ссылок с запрещенным переходом (для поисковых систем) - используется, например, в непроверенных, ненадежных и платных ссылках;
  • Tag - тэг (команда).

Пункт меню Вставить изображение

Шаг 6

Далее укажите, как открывать ссылку - в том же окне или в новой вкладке.


Пункт меню Вставить изображение

Шаг 7

Также Вы можете указать класс/стиль из доступных CSS классов (стилей оформления).



Пункт меню Вставить изображение

Шаг 8

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

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

  • onfocus - переход "фокуса" на объект;
  • onblur - уход "фокуса" с объекта;
  • onclick - клик по объекту;
  • ondblclick - двойной клик по объекту;
  • onmousedown - нажатие кнопки мыши;
  • onmouseup - отпускание кнопки мыши;
  • onmouseover - курсор мыши над объектом;
  • onmousemove - перемещение курсора над объектом;
  • onmouseout - уход курсора с объекта;
  • onkeypress - нажатие и отпускание клавиши;
  • onkeydown - нажатие клавиши;
  • onkeyup - отпускание клавиши.

Шаг 9

Также Вы можете перейти к вкладке "Расширенные" и задать следующие параметры:

  • Имя - индивидуальный идентификатор (имя) ссылки;
  • Стиль - стиль ссылки (один из заданных для документа стилей CSS);
  • Классы - класс (вариант) отображения ссылки (из используемых);
  • Направление текста - направление письма в языке документа ссылки ("Справа-налево" - для восточных языков);
  • Язык цели - язык, используемый в окне/фрейме, где будет открыта ссылка;
  • Код языка - код языка документа ссылки;
  • Кодировка цели - таблица символов, используемая в документе ссылки (номер);
  • MIMI тип цели - тип файла ссылки, передаваемый в место назначения;
  • Заголовок - атрибут, определяющий последовательность перехода по клавише "Tab";
  • Ключ доступа - клавиша быстрого доступа к ссылке.

Пункт меню Вставить изображение

Шаг 10

После внесения всех изменений нажмите "Ок".


Пункт меню Вставить изображение

Альтернативные способы

Вы можете перейти к вставке/редактированию ссылки с помощью:

  • Комбинации клавиш Ctrl+K.
  • С помощью кнопки в рабочей области текстового редактора.

Пункт меню Вставить изображение

Специальные символы

При написании документа Вы можете воспользоваться специальными символами (символами валют, копирайта, стрелками и пр.).

Шаг 1

Для этого в меню "Вставить" выберите пункт "Специальные символы".


Пункт Специальные символы

Шаг 2

Откроется окно с таблицей символов. В правой части Вы также можете просматривать символы в увеличенном размере - для этого просто наведите курсор на нужный символ в таблице.

Выберите и нажмите на нужный знак - он будет вставлен в текст.


Таблица символов

Горизонтальная линия

Чтобы вставить разделительную горизонтальную линию по всей длине текста - в меню "Вставить" выберите пункт "Горизонтальная линия".


Пункт меню «Горизонтальная линия»

Якорь

С помощью так называемых "якорей" Вы можете вставлять невидимые ссылки с уникальными названиями в текст внутри страницы.

Например, если текст страницы очень объемный и состоит из нескольких подразделов, заголовок каждого из подразделов можно оформить в виде "якоря", задав каждому из "якорей" уникальные названия. Скажем, на странице "http://example/about" три раздела, каждый из них выделен в виде "якоря" с названиями "razdel-1", "razdel-2" и "rasdel-3", соответственно, чтобы пройти к любому из разделов, достаточно к адресу страницы дописать имя "якоря" через решетку - "http://example/about#razdel-3" - страница откроется именно в области третьего заголовка. При необходимости Вы можете сделать в начале документа оглавление, оформив ссылки на "якоря" в виде пунктов списка.

Рассмотрим, как можно вставить якорь в текст.

Шаг 1

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

Затем в меню "Вставить" нажмите "Якорь".


Пункт меню «Якорь»

Шаг 2

Откроется окно вставки "якоря". Укажите название (оно будет использоваться в ссылке на "якорь") и нажмите "Ok".


Окно вставки «якоря»

"Якорь" будет вставлен в текст.

Вставка ссылки на якорь

Чтобы вставить в текст ссылку на якорь, например, в оглавлении - воспользуйтесь обычной вставкой ссылки.

На вкладке "Общее" появится дополнительный параметр "Якоря" - выберите нужный "якорь" и сохраните ссылку. Обратите также внимание на то, что в адрес ссылки подставляется имя якоря через символ решетки.


Вкладка «Общее» диалового окна «Вставить ссылку»

Разрыв страницы

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

Чтобы вставить разрыв страницы в текст, просто выберите в меню "Вставить" пункт "Разрыв страницы".


Пункт меню «Разрыв страницы»

Вставить дату/время

Чтобы сделать в тексте вставку в формате даты/времени, выберите в меню "Вставить" пункт "Вставить дату/время".

Раскроется меню выбора формата - нажмите на нужный Вам способ отображения.


Пункт меню «Вставить дату/время»

Неразрывный пробел

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

Если Вам необходим подобный символ, в меню "Вставить" нажмите на пункт "Неразрывный пробел".


Пункт меню «Неразрывный пробел»