test adv
,

Как пользоваться редактором на Трешбоксе

Чтобы начать писать новости, статьи и обзоры на Трешбоксе, нужно детально ознакомиться с возможностями нашего редактора Bredacture. Новичкам в большинстве случаев это дается сложно, поэтому мы приготовили специальную статью. Здесь вы сможете прочитать, как правильно пользоваться редактором Трешбокса и какие функции необходимо использовать для лучшего оформления топиков.

Особенности работы

Текстовый редактор, который используется на Трешбоксе, отлично работает во всех современных браузерах не только на ПК, но и на мобильных устройствах под управлением Android и iOS. В качестве тегов для разметки используется популярный язык HTML. У нас все автоматизировано, поэтому все используемые вами теги, кроме разрешенных, просто удаляются парсером и не попадают в текст топика.

Стандартно редактор выглядит вот так:

Как пользоваться редактором на Трешбоксе

Единственным исключением является браузер Opera Mini. Из-за особенностей своей работы в этом браузере редактор отображается по стандарту в HTML-режиме:

Как пользоваться редактором на Трешбоксе

Структура HTML-документа

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

  • HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. 

Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

  • <strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
  • <a href=«www.example.com»>Здесь элемент содержит атрибут href, то есть гиперссылку.</a>

Например, чтобы сделать вот так: этот текст будет жирным, а этот — ещё и курсивным; нужно написать в редакторе следующий код:

<b>

Этот текст будет полужирным,

<i>а этот — ещё и курсивным</i>

</b>

Функции кнопок и разрешенные теги

Как пользоваться редактором на Трешбоксе

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

  • Заголовок H2.
  • Жирный текст.
  • Курсивный текст.
  • Зачеркнутый текст.
  • Цитата.
  • Нумерованный список.
  • Ненумерованный (точечный) список.
  • Добавить ссылку.
  • Удалить ссылку.
  • Вставить картинку.
  • Вставить видео.
  • Вставить программу.

HTML-режим

Как пользоваться редактором на Трешбоксе

Первая кнопка редактора отвечает за переход между обычным режимом и HTML-режимом. Она находится слева отдельно от основных функций. HTML-режим позволяет исправить ошибки при форматировании текста, которые нельзя исправить в обычном режиме при работе в редакторе.

Заголовок H2

Как пользоваться редактором на Трешбоксе

В больших статьях часто используется несколько содержательных разделов. Все они выделяются заголовками. Для создания заголовка в редакторе служит вторая кнопка от HTML-режима (также ее можно считать первой в блоке функциональных кнопок). Чтобы превратить часть текста в заголовок, нужно выделить ее и нажать кнопку с буквой H. Для удаления стиля заголовка необходимо в HTML-режиме удалить тег <h2>.

Пример:

Заголовок

В HTML-режиме за стиль заголовка отвечает тег <h2>. Полная конструкция выглядит вот так:

  • <h2>Заголовок</h2>

Жирный текст

Как пользоваться редактором на Трешбоксе

Если необходимо акцентировать внимание на небольшой части текста, то его можно выделить с помощью жирности. Для придания тексту жирности нужно выделить желаемую часть текста мышкой и нажать на кнопку с буквой B. Чтобы удалить жирность — просто сделайте то же самое: выделите текст и нажмите кнопку еще раз.

Пример: Жирный текст. В HTML-режиме за стиль жирного текста отвечает тег <b> или <strong>. Полная конструкция выглядит вот так:

  • <b>Жирный текст</b>

Курсивный текст

Как пользоваться редактором на Трешбоксе

Курсив обычно используется в некоторых случаях: для обращения внимания читателей на конкретную часть текста или содержимого кода. Для придания тексту курсивного стиля нужно выделить желаемую часть текста мышкой и нажать на кнопку с буквой I. Чтобы удалить курсив — просто сделайте то же самое: выделите текст и нажмите кнопку еще раз.

Пример: Курсивный текст. В HTML-режиме за стиль курсивного текста отвечает тег <i>. Полная конструкция выглядит вот так:

  • <i>Курсивный текст</i>

Зачеркнутый текст

Как пользоваться редактором на Трешбоксе

Любители странного юмора иногда используют именно этот тег. Для придания тексту зачеркнутого стиля нужно выделить желаемую часть текста мышкой и нажать на кнопку с зачеркнутой буквой S. Чтобы удалить зачеркивание — просто сделайте то же самое: выделите текст и нажмите кнопку еще раз.

Пример: Зачеркнутый текст. В HTML-режиме за стиль зачеркнутого текста отвечает тег <strike>. Полная конструкция выглядит вот так:

  • <strike>Зачеркнутый текст</strike>

Цитата

Как пользоваться редактором на Трешбоксе

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

Пример:

Трешбокс.ру — популярный сайт с новостями, статьями и обзорами по теме высоких технологий. Его месячная посещаемость составляет более 5 миллионов человек в месяц.

В HTML-режиме за создание стиля цитаты отвечает тег <blockquote>. Полная конструкция выглядит вот так:

  • <blockquote>Трешбокс.ру — популярный сайт с новостями, статьями и обзорами по теме высоких технологий. Его месячная посещаемость составляет более 5 миллионов человек в месяц.</blockquote>

Нумированный и ненумированный списки

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

Как пользоваться редактором на Трешбоксе

Пример нумированного списка:

  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка
  4. Четвертый пункт списка
  5. Пятый пункт списка
Как пользоваться редактором на Трешбоксе

Пример обычного (точечного) списка:

  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка
  • Четвертый пункт списка
  • Пятый пункт списка

Конструкция обоих типов списка в HTML-режиме выглядит абсолютно одинаково. В разных случаях (нумированный или ненумированный) только применены разные теги — вместо <ul> используется <ol>, или наоборот. Конструкция в HTML-режиме выглядит вот так:

<ul> // начало списка

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul> // конец списка

Вставка или удаление ссылок

Если вставить ссылку в стандартном формате, например: trashbox.ru/public/help/, то парсер автоматически распознает её и сделает кликабельной. Если необходимо вставить ссылку в текст и сделать его кликабельным, то для этого нужно выделить желаемую часть текста и нажать на кнопку с изображением цепочки (пересечения звенья). 

Как пользоваться редактором на Трешбоксе

После нажатия под редактором появится специальное поле, куда требуется вставить ссылку в стандартном формате. Все остальное за вас сделает кнопка «Применить».

Для удаления ссылки из текста нужно нажать соседнюю кнопку со значком крестика.

Пример: главная Трешбокс.ру. В HTML-режиме за создание ссылок отвечает тег <a>. Полная конструкция выглядит так: 

  • <a href=«Ссылка» >Текст с ссылкой</a>

Вставка картинок и галерей

Как пользоваться редактором на Трешбоксе

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

Как пользоваться редактором на Трешбоксе

После нажатия под редактором появится специальное поле, где нужно выбрать необходимый для вставки файл (или несколько файлов для галереи). Это делается через форму «Выбрать файлы» с дальнейшим указанием пути к файлу и загрузкой через кнопку «Загрузить».

Для удаления картинки из текста в редакторе нужно выделить ее мышкой и нажать кнопку Delete на клавиатуре вашего компьютера.

Как пользоваться редактором на Трешбоксе

Для вставки галереи (несколько изображений, доступных для просмотра с эффектом прокрутки) нужно выбрать несколько файлов, обтекание (по центру с прокруткой), а также масштаб изображений (рекомендуется до 315 по высоте).

Пример галереи:

В HTML-режиме за вставку картинок отвечает тег <img>. Полная конструкция выглядит вот так:

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

Как пользоваться редактором на Трешбоксе

С помощью редактора Трешбокса в текст можно добавлять видеоматериалы. Редактор воспринимает только несколько избранных сервисов — это YouTube, Vimeo и Coub. Ссылка на видео должна быть в чистом виде, без дополнительных параметров. 

Как пользоваться редактором на Трешбоксе

После нажатия под редактором появится специальное поле, куда требуется вставить ссылку в стандартном формате. Чтобы удалить видео — выделите плашку мышкой и нажмите кнопку Delete на клавиатуре вашего компьютера.

Как пользоваться редактором на Трешбоксе

Примеры ссылок:

Вставка программ и игр

Как пользоваться редактором на Трешбоксе

Раньше мы вставляли ссылки на программы и игры посредством официальных кнопок магазинов приложений Google Play, App Store и Windows Store, а также специальной кнопки для скачивания непосредственно на Трешбоксе. Сегодня, когда скачать всё можно на Трешбоксе, мы используем исключительно новый вид плашек для приложений. Он доступен в виде кнопки в редакторе сайта.

Как пользоваться редактором на Трешбоксе

После нажатия под редактором появится специальное поле, куда требуется вставить ссылку в стандартном формате. Ссылка должна вести на топик, размещенный на сайте! Все остальное за вас сделает кнопка «Применить».

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


Instagram 199.0.0
Android 5.0 и выше

Altos Adventure 1.8.0
Android 5.0 и выше

Обращаем ваше внимание! Не пытайтесь повторить вставку программы или игры в виде новой плашки через HTML-режим! Функция редактора автоматически генерирует тег, недоступный для самостоятельной настройки.

Другие разрешенные теги

Есть еще несколько разрешенных тегов для редактора Трешбокса, но они либо ставятся автоматически (например, <br>), либо используются очень редко (например, <u> или <center>). Тем не менее, они есть и ими можно время от времени пользоваться.

  • <center> — центрирование текста или картинки.
  • <br> — переход на новую строку.
  • <u>текст</u> — подчеркнутый текст.

Если используемый вами браузер по какой-то причине поддерживает только HTML-режим, то для форматирования вы можете смело пользоваться приведенными выше тегами. Не стоит перебарщивать с жирностью текста или пытаться отличаться от других использованием стиля заголовков — особенно в разделе комментариев. Такие комментарии награждаются красными ачивками или удаляются.

Последнее изменение:
 
roasthead
roasthead, 6 апреля 2014, 13:40   (...)
слава богу, теперь надеюсь не будет топиков: а как мне сделать ссылку в слове, очинь нада);
Ответить
denosaur
denosaur29, 6 апреля 2014, 13:42   (...)
"Все теги кроме разрешенных, о которых немного ниже, просто удаляются парсером и не попадают в текс топика."
Ответить
Azhykulov
Azhykulov22, 6 апреля 2014, 13:49   (...)
Кстати, полчеркивание текста тоже работает
Ответить
Azhykulov
Azhykulov22, 6 апреля 2014, 13:49   (...)
Подчеркивание
Ответить
Rost
Rost, 6 апреля 2014, 13:53   (...)
Спасибо, добавлю.
Ответить
Azhykulov
Azhykulov22, 6 апреля 2014, 13:53   (...)
Только вот в редакторе его нет. А надо бы.
Ответить
Harmattan
Harmattan37, 6 апреля 2014, 13:55   (...)
Эта статья должна была быть одной из самых первых на Трешбоксе.

И пусть она всегда висит у «Горячих темах» — она будет постоянно доступна для новичков.
И тогда не будет глупых ситуаций.
Ответить
Rost
Rost, 6 апреля 2014, 13:57   (...)
В ближайшее время выкачу инструкции по всем вопросам, которые могут возникнуть при создании или редактировании топиков. Все ссылки запилим в раздел помощь и расставим их внутри самого редактора топиков.
Ответить
R00T
R00T7, 6 апреля 2014, 13:59   (...)
Давно надо было написать
Ответить
Bek_33
Bek_3315, 6 апреля 2014, 14:20   (...)
Лучше поздно чем никогда
Ответить
Rost
Rost, 6 апреля 2014, 14:20   (...)
Вообще в редакторе нет ничего сложного, мы думал люди смогут разобраться и без инструкции, а вышло что нет.
Ответить
R00T
R00T7, 6 апреля 2014, 14:21   (...)
Новичкам тяжеловато разобраться. Я минут 5 разбирался.
Ответить
nghtmre
nghtmre 17, 6 апреля 2014, 14:22   (...)
a ещё подчеркивание можно сделать с помощью <u> и </u>
Ответить
android_igor
android_igor1, 6 апреля 2014, 14:48   (...)
Теперь я всё знаю (надеюсь что больше не будет тупых вопросов)
Ответить
CHEL
CHEL8, 6 апреля 2014, 14:54   (...)
Всё подробно расписано так сказать «для тупых». Теперь я не думаю, что у кого нибудь будут возникать вопросы насчёт редактора. Только хорошо бы было полезные топики вроде этого пихнуть куда-нибудь на главную, например сделав раздел «помощь».
Ответить
daser
daser7, 6 апреля 2014, 17:48   (...)
Очень нужная статья! Новичкам будет полезна.
Ответить
Shegiva
Shegiva5, 6 апреля 2014, 17:53   (...)
Для удаления видео, пр
Ответить
iPhone_
iPhone_, 6 апреля 2014, 18:00   (...)
Да, большое спасибо, Рост! Я уж думал ты так и будешь выкладывать вирусные матерные топики… Молодец.
Ответить
TimAxe
TimAxe4, 6 апреля 2014, 18:40   (...)
Рост не лучше ли будет в режиме HTML добавить всплывающие подсказки или прикрепить в панели инструментов — расспространенные теги, которые могли бы упростить вод тегов?
например этого
__TCAPT__
Ответить
Anakin2111
Anakin2111, 6 апреля 2014, 20:18   (...)
76% уникальности!!!
Ответить
21soroka
21soroka, 11 мая 2014, 00:59   (...)
<u>lol</u>
Ответить
21soroka
21soroka, 11 мая 2014, 01:00   (...)
<u>Что-то нету подчеркнутого текста</u>
Ответить
Azhykulov
Azhykulov22, 11 мая 2014, 05:59   (...)
В HTML Пиши
Ответить
21soroka
21soroka, 11 мая 2014, 10:24   (...)
Блин, вот я лол
Ответить
Azhykulov
Azhykulov22, 11 мая 2014, 11:34   (...)
Лол не оскорбление, лол
Ответить
21soroka
21soroka, 11 мая 2014, 12:23   (...)
Эм, я знаю
Ответить
BigNick
BigNick, 4 ноября 2016, 12:28   (...)
Очень содержательная инструкция, особенно для тугодумов, как я:)
Ответить

Добавить комментарий
Если нужно ответить кому-то конкретно,
лучше нажать на «Ответить» под его комментарием