Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Визуальный редактор Tiny_MCE.

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

Откройте любую статью для редактирования.
Вы увидите текст в окне и сверху блок с кнопками.

Визуальный редактор Joomla. Tiny_MCE

По умолчанию редактор имеет улучшенные возможности, их большинстве случаев хватает. Чуть ниже мы рассмотрим и расширенные возможности.

Начнём по порядку. Кто работал в редакторе Word, тому вообще легко, здесь много похожих функций.
• Четыре первых кнопки слева вверху, определяют выделение шрифта каким либо образом.
В - Жирный шрифт, I - курсив, U - подчёркнутый, ABC - перечёркнутый.
Чтобы изменить текст, выделите его мышкой и нажмите соответствующую клавишу.

• Следующие четыре кнопки определяют выравнивание текста.

• В Стилях можно задать свой стиль текста, но нам он пока не нужен.
Абзац - выбор вида заголовка или новой строки. Абзац/параграф, Форматированный, Заголовки Н1 - Н6.

• Средняя строка, первые две кнопки позволяют создать маркированный или нумерованный список.
• Следущие две - уменьшить/увеличить отступ.
• Две стрелочки - отмена/повтор.
• Следующие две кнопки позволяют вставить ссылку в текст или удалить её, оставив только текст. Пример вставки ссылки в слово Россия.

Выделяем нужное слово, нажимаем кнопочку похожую на упавшую цифру 8, подчёркнута красным. Появляется окно с параметрами.

Визуальный редактор Joomla. Tiny_MCE

Задаём URL-адрес на который должна вести ссылка, если нужно цель, заголовок (при наведении мышкой будет всплывать), класс нам пока не нужен. Жмём Вставить.
Всё ссылка готова. Соседней кнопочкой можно удалить эту ссылку, оставив только слово.

• Якорь - вставляет тэг <a name="xxx">, для указания ссылок в пределах одной страницы.

• Кнопочка с деревом. Вставляет/изменяет изображение.

Визуальный редактор Joomla. Tiny_MCE - Вписываете адрес, где находиться изображение.
- Его описание (тег - Alt).
- Выбираете выравнивание, если нужно.
- Можете прописать размеры картинки.
- Границы (тег - border) в пикселях.
- Отступ от текста по вертикали и горизонтали.
Нажимаете вставить.

Изображение можно вставить и другим способом, более удобным.
Для этого есть кнопка внизу - Изображение. Нажимаем - появляется окно с файлами и папками.
это содержимое папки image/stories, находящейся в корне сайта.

Визуальный редактор Joomla. Tiny_MCE

Здесь находятся уже созданные и закачанные изображения. Выбираете нужную картинку, устанавливаете выравнивание и нажимаете Вставить - в самом верху окошка.
Если изображение находится у вас на компьютере, вы можете его закачать.
Для этого нажмите кнопку Обзор... внизу окна и выберите из нужной папки на компьютере ваше изображение. Потом Начать Закачку. Когда ваше изображение закачается в Joomla, оно появится среди других изображений. Выбираете и вставляете.

 

• Далее идёт кнопочка с изображением метлы. При нажатии на неё происходит очистка HTML-кода статьи от ненужных элементов : лишние пробелы, точки, ошибочные тэги и т.д. При написании статей и их редактировании иногда появляются такие лишние элементы, это во всех редакторах бывает. По завершении статьи рекомендуется почистить код. Это немного уменьшит вес страницы, и она будет загружаться побыстрее.

• Кнопочка с вопросом вызывает справку о редакторе, она тоже нам впринципе ненужна, если Вы только не переводчик английского. Потому что там всё по-английски.

• Кнопка с надписью HTML открывает окно с HTML-кодом статьи, здесь можно исправить его в ручную, если через редактор что то не выходит.

• Кнопочка с линией. Вставлят в текст горизонтальную линию - тэг <hr>.

• Следующая кнопка со стёркой убирает форматирование в тексте.

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

• Следующие две кнопки позволяют использовать нижний/вернхний индекс, тэги <sub> и <sup>.

• Кнопка с изображением Ω позволяет вставить символ которого нет на клавиатуре.

Ещё хочу предупредить!
Иногда (чаще всего) в редакторах не работает вставка ссылки Читать полностью...
В этом случае можно вставить её в ручную, используя кнопку изменения HTML-кода.
В нужном месте вставляете <hr id="system-readmore"/> и всё готово.

Ну вот и всё. На этом функции редактора Tiny MCE в улучшенном режиме закончились.

 

Теперь немного о расширенных возможностях. Для того чтобы включить эти расширенные возможности нужно выйти из редактора, нажав Сохранить или Закрыть. После в вехнем меню выбрать Расширения - Плагины.

Визуальный редактор Joomla

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

Визуальный редактор Joomla. Tiny_MCE расширенный

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

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

На этом обзор Tiny MCE окончен. Теперь разберём настройки сайта на Joomla.

 

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!