Блог. Часть 4. Работа с текстовым редактором блога

Форматирование текста в блогах на нашем сайте возможно благодаря BBcode. Что такое BBcode? Зачем он нам нужен? BBcode это особая реализация HTML, язык разметки, используемый для форматирования сообщений/записей/комментариев.

Для форматирования текста Вы можете использовать панель редактора или вручную вносить тэги (это способ может быть удобен продвинутым пользователям). Что такое тэг? Это специальные пометки, которые обозначают начало и конец структурных элементов, именно при помощи их Вы укажите системе, где будет курсив, а где полужирный шрифт, какую часть текста следует разместить по центру, а какую выровнять по правому краю, обозначите медиафайл и так далее. Особенность тэгов в том, что они видны в поле редактирования записи, но не отображаются при чтении записи.

Хотите структурировать свои записи?

Как же с ними работать? Опять таки – кому-то удобно набирать текст прямо в редакторе, кто-то копирует его из других программ, но важно – сначала лучше полностью подготовить текст, это облегчит работу. Затем приступим к форматированию, которое в принципе аналогично работе с текстом в Microsoft Word. Выделили нужную часть текста и нажали требуемую кнопку редактора. Основное отличие от Microsoft Word – текст не станет наклонным, зачеркнутым или другим, вместо этого по границам выделения появятся те самые тэги. После сохранения они не отобразятся, а Ваш текст получит требуемый вид. Писать об этом довольно сложно, перейдем к примерам.

Изменение стиля шрифтов

В редакторе набраны названия шрифтов, к ним применен соответствующий вид форматирования.
В окне редактора Вы увидите:

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

Выравнивание текста

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

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

Комплексное форматирование текста

Можно ли использовать несколько стилей форматирования одновременно? Да, можно, но необходимо следить за правильным использованием тэгов. Приведенные здесь тэги являются парными, они состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается — [тег], в закрывающем тэге используется слэш (наклонная черта) - [/тег]. Важно соблюдать порядок их расстановки. При добавлении нового форматирования важно выделить сам текст без других тэгов – в итоге они будут окружать исходный текст как контейнеры (матрешки).
В окне редактора Вы увидите:

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

Заголовки

Заголовки… использовать или нет? Они указывают на наличие разделов, их важность (чем больше заголовок, тем более он значимый); с их помощью можно регулировать размер текста (чем выше уровень заголовка, тем больше размер шрифта); помимо этого поисковые системы добавляют рейтинг тексту, если он находится внутри тега заголовка (важно, если хотите раскрутить свой пост). В редакторе набраны названия заголовков, им придан соответствующий вид.
В окне редактора Вы увидите:

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


Как видим, процесс форматирования не так сложен!

Цитаты

Название говорит само за себя, инструмент полезен для акцентирования внимания при комментировании записей. Например, Вы хотите указать именно ту часть записи, которой у Вас есть вопрос, комментарий и т.д. В блоге использование цитирования несколько затруднено следующим обстоятельством – при нажатии на кнопку Вы увидите окошко для вставки текста цитаты, которое станет активным и не позволит скопировать цитируемый фрагмент текста. Следовательно, текст необходимо заранее скопировать. Текст может включать всю запись, ее часть (желательно брать конкретную часть записи). В следующем окне можно ввести автора (снова окно будет активным и не позволит копировать). Как выход из ситуации – заранее скопировать в стороннее приложение текст цитаты и автора.



В окне редактора Вы увидите:

В самой записи после сохранения в рамке и с фоном будет указан автор, ниже текст цитаты:

Ссылки

Следующая кнопка позволяет вставить web-ссылку. Вы можете просто скопировать ссылку и вставить ее в окно редактирования, и в большинстве случаев она отобразится правильно. К чему тогда этот инструмент? Он позволяет дать имя ссылке, т.е. вместо зачастую длинного адреса ссылки показать ее имя. Смотрится гораздо приятнее. Вставка ссылке аналогична цитированию – два окна, ограничение копирования во время вставки. В первом окне указываем адрес ссылки, во втором – название (необязательно поле). Для примера наберем сделаем одну ссылку с именем, вторую без него.
В окне редактора Вы увидите:

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

Вставка e-mail

Следующая кнопка является разновидностью ссылки и служит для правильной вставки e-mail адреса. Порядок работы – указать e-mail адрес, выделить его и нажать на кнопку. После сохранения записи, при нажатии по адресу Ваша ОС автоматически запустит почтовый клиент, который указан у Вас по умолчанию, Вы сможете отправить e-mail по приведенному адресу.
В окне редактора Вы увидите:

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

PHP Code

Кнопка «Код» используется для вставки оригинального php кода, т.е. отражает внутреннее тело записи со всеми тэгами, кодом и прочим (смотрите пример). Порядок работы – указать код, выделить его и нажать на кнопку. Инструмент востребован у программистов, для наших блогов в принципе не так важен.

Скрытый текст

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

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

Если Вы не авторизированы, то будет следующее:


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

Спойлер

Спойлер представляет собой скрывающийся (или показывающийся) объект (текст, картинка и т.д.). По существу инструмент также позволяет скрыть текст, но принцип другой – Вы скрываете часть текста (как правило, это дополнительные пояснения) в целях экономии места, не хотите преждевременно показывать какую-либо информацию. Пример последнего - задали вопрос, а ответ скрыли под спойлер. Каждый пользователь может кликнуть по спойлеры и ознакомиться с его содержимым. Порядок работы – выделить содержимое (часть записи, которую необходимо скрыть) и нажать на кнопку.
В окне редактора Вы увидите:

В самой записи после сохранения по умолчанию будет следующее:


Внимание! Каждый спойлер может быть переименован. Для этого вместо слова «Спойлер» в окне редактора введите желаемое название.

Жмите «Показать» справа от названия спойлера, и сможете ознакомиться с его содержимым. Повторное нажатие свернет спойлер в исходное положение.

Смайлы

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

Конец анонса

Подробно о данном инструменте Вы можете узнать здесь (см. рисунок 5).

Оставшиеся инструменты предназначены для вставки медиафайлов.

Видеофайлы

Наша сеть поддерживает вставку видеофайлов исключительно с видеохостинга (YouTube, Rutube), т.е. если Вы хотите поделится своим видео, то для начала его нужно разместить на одном из перечисленных сервисов, после чего правильно скопировать код видео в свою запись. Если файл уже размещен в сети (поддерживается работа только с перечисленными сервисами), то Вам остается только скопировать код. Как получить код видео?

Итак, код скопирован! Жмем кнопку вставки видео, в появившемся окошке прописываем скопированный код, подтверждаем.



Внимание! Для корректного отображения Вашей записи параметр «width» в коде не должен превышать 550 px! В случае превышения допустимого значения, его необходимо исправить вручную, т.е. просто заменить цифры. Тем самым вы уменьшаете ширину окошка, потому не забудьте пропорционально уменьшить и высоту (параметр «height»).

В окне редактора Вы увидите:

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

Аудиофайлы

В настоящее время функция находится в доработке.

Изображения

Последние три инструмента предназначены для размещения изображений соответственно их расположению – из сети, из Вашего альбома и непосредственно с ПК. Каждый их доступных способов добавления изображений имеет свои преимущества и недостатки. В первом случае Вы просто даете ссылку на изображение, следовательно, оно будет добавлено именно в том виде, в котором представлено в источнике. Это быстро, удобно, но если размер картинки более 550 px в ширину, она будет автоматически обрезана в записи. Еще один минус в том, что если изображение будет удалено/преобразовано в источнике, то изменения коснуться и Вашей записи. Вставка фото из альбома неплохой вариант, когда нужно неоднократно использовать одно изображение. Это прекрасный вариант при написании поста о путешествии/поездке - фото будут и в альбоме (одна загрузка), и в блоге одновременно.

Внимание (!) поддерживаются только 3 графических формата: jpg(jpeg), png и gif!

Изображение из сети. В данном случае необходим URL файла. Как получить? Первый способ - щелкаем правой клавишей по нужному изображению и выбираем «Копировать URL картинки».


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



Для вставки изображения нажимаем соответствующую кнопку, в появившемся окошке вносим скопированный URL, подтверждаем.


Изображение из альбома. При нажатии кнопки Вам будет предложено выбрать одно из Ваших изображений. В выпадающем списке выберите нужное фото и нажмите «Вставить».


Изображение с ПК. Необоримо нажать кнопку «Выберите файл», после чего в открывшемся окне указать нужный файл (двойной щелчок левой клавиши мыши или нажать кнопку «Открыть»), и нажать «Вставить».


Внимание! Какой бы способ Вы не выбрали, помните - ширина изображения для блогов не должна превышать 550 px.


Не так трудно как могло показаться