Когда интерфейс имеет значение

Блог

Как работать с текстом в редакторе TinyMCE

Как работать с текстом в редакторе TinyMCE

28.01.2009

 

В CMS ForSiter используется визуальный редактор TinyMCE. Это достаточно мощный HTML-редактор. Он дает много возможностей для оформления текста на сайте. Несмотря на всю его интуитивную понятность, для того чтобы получать желаемый результат быстро, не обладая при этом знаниями HTML-верстки, лучше следовать определенной последовательности действий.

Тут собраны ответы на наиболее часто встречающиеся вопросы заказчиков. А также советы, как не совершать типичные ошибки.

Как работать с текстом (последовательность действий)

  1. Сперва текст нужно набрать в любом удобном месте, это может быть MS Word, OpenOffice — все равно. Оформлением заниматься не нужно, важны только символы. Если вы редактируете только часть текста, не обязательно копировать всю статью, работайте с отдельным блоком. Внесение мелких поправок проще осуществлять сразу на сайте.

  2. Перед копированием убедитесь, что все ваши буквы собраны в слова и предложения в соответствии со всеми правилами типографики. В тексте не должны встречаться подряд 2 пробела, 2 переноса строки. Проверить это можно включив отображение скрытых символов в редакторе, где набирали текст. А дальше автозамена всем поможет — меняем два пробела на один. В итоге все символы должны быть верными (дефисы, тире, кавычки и т.д.)

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

  4. После того, как вы вставили текст в редактор сайта, его необходимо структурировать:

    — разбейте весь текст на абзацы;

    — создайте необходимые заголовки;

    — создайте списки там, где они должны быть.

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

  6. Расставьте ссылки. Для это необходимо сделать следующую последовательность действий: выделите текст, нажмите иконку с цепочкой, заполните форму параметров ссылки. Рассмотрим ссылки пяти видов:

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

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

    — Ссылка на конкретное место на странице. Место на которые ссылаемся должно быть отмечено якорем (для этого служит соответствующая иконка в панели) , после этого достаточно будет выбрать имя якоря.

    — Ссылка на файл. Для того, чтобы по ссылке открывался файл, необходимо его загрузить на сервер. Это можно сделать тут же, кликнув на иконку файлового менеджера справа от поля «адрес ссылки» .

    — Ссылка на электронный адрес (e-mail). Для этого нужно адрес ссылки написать  в следующем формате: mailto:admin@site.ru

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

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

  8. Вставьте таблицы. Для вставки таблицы кликните на иконку «таблица». В открывшемся окне «Параметры таблицы» укажите число строк, столбцов и другие параметры при необходимости. Выберите класс таблицы «table». Нажмите «Вставить». Для редактирования таблицы снова кликните по иконке «таблица». Для различных ячеек можно назначить соответствующие стили из списка. Создавая новые таблицы, лучше придерживаться уже созданных стилей. После редактирования нажмите «Обновить». Для удаления таблицы кликните по таблице правой кнопкой мыши, в выпавшем списке выберите пункт «Удалить таблицу».

 Некоторые принципы и правила верстки

  • Время редактирования текста без сохранения не должно превышать 3—5 минут. Вы в Интернете, может прерваться связь, может закончиться время сессии, и у вас не будет никакой возможности сохранить внесенные изменения. Если хотите публиковать большой текст, напишите его заранее и оформляйте частями, периодически сохраняя.

  • Следует разделять перенос строки в рамках одного абзаца (Shift+Enter) и создание нового абзаца (Enter). Во втором случае отбивка между строками будет, а в первом — нет. Часто после вставки текста из блокнота весь текст является одним абзацем с разрывами строк. Для того чтобы расставить абзацы, необходимо, поставив курсор в место переноса, удалить символ переноса (Del) и нажать Enter.

    Переносы строк есть, но абзац один.

    Сейчас тут 4 абзаца.

  • Если при выключке по ширине строка слишком разреженная, для того чтобы заполнить ее, необходимо разорвать длинное слово, расположенное на следующей стороке. Делается это вставкой знака переноса и пробела «- ». Пробел обязателен, иначе перенос будет осуществляться не во всех браузерах.

  • Для того чтобы избежать разрыва нескольких слов на разные строки, можно воспользоваться неразрывным пробелом.

  • Во время вставки изображения через редактор нельзя менять его размер. То есть если нам на сайте нужно изображение размером 250x250 пикселов, то изображение такого размера нужно заготовить заранее и заливать его через редактор уже в нужном размере. Иначе будут видны искажения. Чтобы узнать совпадают ли физический размер картинки с прописанным в коде страницы, в FireFox можно кликнуть правой кнопкой на изображении и нажать «Свойства».

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

  • Все файлы, загружаемые на сервер, должны иметь имена, набранные латиницей, не содержащие пробелов.

  • На сайте в русском тексте мы используем либо такие кавычки «елочки», либо такую пару „кавычки”.

  • Длинный текст лучше разбивать на смысловые отрывки, разделяя их заголовками. Заголовки должны иметь иерархию: самый крупный заголовок — заголовок всего текста, подзаголовки — поменьше, если в них есть еще подзаголовки, то их следует делать еще меньше. Для этого предусмотрены различные стили, например, заголовок 1, заголовок 2. Заголовок 1 может быть применен к тексту единожды и, как правило, применяется автоматически к главному заголовку.

  • Текст в веб-среде воспринимается лучше и легче при выравнивании по левому краю, а не по центру. Исключение составляют различные подписи, например авторство — их принято выравнивать по правому краю.



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

  • Разделяйте тире «—» и дефисы «-». Чтобы поставить тире, нажмите иконку «символ» (как в ворде) и выберите там тире нужной длины.

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

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

Желаем Вам читабельных текстов и активных пользователей!


 
назад Как добавить страницу в CMS ForSiter Как загрузить файл на сайт в TinyMCE вперед
blog comments powered by Disqus