Меню

Редактор tinymce настройка плагинов



Joomla3-x.ru

Вступление

В установочный дистрибутив Joomal входит единственный визуальный редактор TinyMCE. Часто визуальные редакторы называют редакторы wisiwyg (визивиг). Перевод соответствует функциям редактора – что видишь, то и получишь.

Редактор Joomla TinyMCE относится к расширениям типа плагин. Соответственно, управление редактором производится на вкладке Расширения→Менеджер плагинов. Тип плагина (название основного каталога) editors, элемент плагина (название каталога плагина) tinymce. Лежит редактор в корневой папке сайта в каталоге: /…/plugins/editors/tinymce.

Важно! Удалять плагин TinyMCE нельзя. Являясь базовым редактором, на нем строится работа других сторонних редакторов Joomla: JCE, CKEditor, Ark Editor (бывший JCK).

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

Исходный функционал редактора TinyMCE скудный, хотя и вполне достаточный для написания статей, вставки фотографий и расстановки ссылок.

Если вы привыкли работать с расширенным функционалом визуальных редакторов, идем в настройки плагина TinyMCE на вкладку: Расширения→Менеджер плагинов и воспользовавшись фильтром по названию TinyMCE, открываем плагин для редактирования.

Расширить функционал редактора можно в строке: Режим редактора (1). Можно выставить три режима: Простой, Стандартный, Расширенный (2). Каждый режим редактора имеет свой набор кнопок визуального редактирования.

В последних версиях Joomla, не помню, с какой версии, убрали стили редактора, оставив, один стиль: lightgray.

Недостатки редактора TinyMCE

К сожалению, для себя я изначально привык работать с редактором JCE и поэтому TinyMCE, субъективно имеет ряд недостатков. Основной из них это неудобное вставление фото в текст. На кнопке «Добавить изображение» фото можно вставить только по него URL. Это неудобно, так как нужно заранее скопировать URLы фотографий в Медиа-менеджере. Однако это удобно, если вы используете для сайта внешние хранилища фотографий.

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

Вернемся к недостаткам TinyMCE. В исправлении неудобства вставки фотографий на помощь приходит сама система Joomla. В системе, по умолчанию установлен плагин: Кнопка — Изображение (тип-editors-xtd, элемент-image). По умолчанию он включении внизу любого визуально редактора, включая внешние, появляется кнопка «Изображение». Она значительно упрощает вставку фото, непосредственно из папок Медиа-менеджера.

Причем, можно вставить фото кнопкой «Изображение», а потом отредактировать его кнопкой «Добавить фото» редактора TinyMCE добавив атрибут alt и title к изображению.

Как отключить редактор

Часто приходится редактировать или добавлять тексты не в визуальном режиме, а в режиме текстового редактора. Для этого не нужно входить в Общие настройки и переключать редакторы на «CodeMirror» или «Без редактора». Достаточно нажать кнопку внизу окна редактора «Выключить редактор».

На этом все! В следующих статьях про редакторы: JCE, JCK, Ark Editor. Сообщение о новых статьях и их анонсы можно получить по почте после подписки.

Источник

Установка и настройка TinyMCE — инициализация и параметры

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Знакомство с великим и могучим текстовым редактором на JS

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB. К ключевым особенностям программы относятся: поддержка тем\шаблонов, языковая поддержка и возможность подключения плагинов. HTML редактор TinyMCE используется во многих системах управления и движках сайтов, в том числе и в системе управления BIT company CMS v 1.01. Мы можем отметить программу как отличный и широкофункциональный инструмент для редактирования HTML кода, вставки видео, текстово-графической информации, таблиц и графиков. Правда так же отметим и скудность русскоязычной информации о методах и свойствах JS редактора TinyMCE( но вам повезло! Здесь вы найдете ответы на базовые вопросы и научитесь работать с редактором TinyMCE).

Читайте также:  Ccproxy настройка web фильтр

Как видно из титульного изображения выше, JS редактор очень похож на текстовый редактор в офисных приложения — принцип работы у редактора TinyMCE аналогичный. Для пользователей не знакомых с возможностями html и css есть графический интерфейс редактора. Для пользователей которые владеют языком программирования html и css есть так же расширенный редактор HTML. Данный редактор позволяет решить практически любые задачи, связанные с оформление страниц.

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

Установка и настройка TinyMCE

1. Скачиваем свежую версию редактора здесь и распаковываем.

2. Копируем содержимое архива в нужную вам директорию сайта.

3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:

4. Инициализируем редактор при помощи JavaScript кода:

5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.

Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:

  • подключение библиотеки к странице сайта
  • инициализация объекта
  • вставка тега textarea, который и становится графическим html редактором.

Инициализация редактора и его параметры

Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:

mode [textareas|exact|specific_textareas|none] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.

    textareas — преобразовывает все теги

  • exact — преобразуются только элементы, идентификаторы которых перечислены в параметре elements(пример из BIT company CMS).
  • none — элементы не преобразуются

theme [simple|advanced] — определяет режим инициализации редактора.

  • simple — режим, включающий базовые функции и запрещающий гибкую настройку
  • advanced — режим, позволяющий гибкую настройку плагинов, кнопок редактора, темы редактора и т.д.

language — указывает код языкового пакета графического редактора TinyMCE.

plugins — список плагинов, инициализируемых вместе с редактором, разделенные запятыми.

theme_advanced_buttons — содержит список элементов управления для вставки в панели инструментов, где строка в панели инструментов.

theme_advanced_toolbar_location — указывает, где должны располагаться панели инструментов: top — сверху, bottom — снизу.

theme_advanced_toolbar_align — позволяет задать выравнивание панели инструментов: по левому краю, по правому и по центру.

theme_advanced_statusbar_location — задает положение статусбара (top — вверху, bottom — внизу), либо указывает на его отсуствие — none.

theme_advanced_resizing — включает — true или выключает — false возможность изменять размеры окна редактора. Не работает, если значение theme_advanced_statusbar_location установлено в none.

skin — указывает какой скин данной темы необходимо использовать.

skin_variant — указывает какой вариант скина необходимо использовать.

content_css — подключает пользовательский css-файл(либо набор файлов, перечисленных через запятую), который будет использоваться в редакторе.

relative_urls — устанавливает, будут ли ссылки в редакторе относительные (true) или абсолютные (false).

template_replace_values — преобразование элемента страницы в графический редактор html кода с параметрами.

Вот мы и подытожим с вопросом подключения и инициализации графического редактора html кода TinyMCE для сайта. Всем спасибо!

Читайте также:  Приборы для настройки спутниковой антенны телекарта
Лучший способ сказать автору «СПАСИБО» рассказать друзьям или поделиться ссылкой!
Другие статьи:

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

Всплывающая фиксированная навигация для сайта jQuery, CSS — инструкция, примеры

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта — инструкция, настройка, инициализация

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

Плагин маски ввода для input — jquery maskedinput — инструкция, настройка, инициализация

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

Публикация на стене Вконтакте средствами API — кросспостинг

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP — основные методы класса PHPExcel

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги — исключения для тегов TinyMCE

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE — вставка тегов, вывод значений

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel — параметры и методы

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: «Писать или не писать smtp клиент с нуля?».

Источник

Вкладка «Плагин» с настройками плагина визуального редактора TinyMCE в админке Joomla 3

После того, как редактор TinyMCE найден в «Менеджер плагинов» в админке Joomla 3, хорошо бы разобраться в том, какие настройки этого плагина предлагаются к изменению, чтобы оптимизировать работу редактора TinyMCE для нужд своего сайта. Ниже дано описание настроек, но сперва будет скрин настроек плагина. Так как настроек много, то следует набраться терпения и докролить до описания того, что отображено на картинке. =)

Итак, страница настроек плагина редактора TinyMCE в админке Joomla 3 выглядит так:

А теперь разберём по порядку, что значат настройки:

РедакторTinyMCE

В этой статье рассмотрим настройки, размещённые в первой вкладке «Плагин»

Список доступных меню и кнопок

Сразу после описания плагина «TinyMCE это кроссплатформенный визуальный HTML-редактор, предназначенный для редактирования текста на веб-страницах.» идёт Список доступных меню и кнопок , которые можно перетаскивать мышкой с места на место, меняя их местами так, чтобы все кнопки и меню находились на привычных местах.

Наборы панелей и параметров TinyMCE

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

Количество наборов (сетов) можно увеличить во вкладке «Дополнительные параметры» (о ней было чуть выше).

Что удобно, так это то, что есть предустановленные наборы инструментов TinyMCE. Кнопки разных цветов:

  • Использовать простые предустановки
  • Использовать средние предустановки
  • Использовать расширенные предустановки

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

Читайте также:  Установка и настройка внешних устройств

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

Пользовательские шаблоны

В последних версиях редактора TinyMCE появилась возможность интерактивной настройки стиля отображения окна редактора. Для этого нужно перейти по ссылке в Панели управления настроек, создать собственное оформление, сохранить его и залить созданный шаблон в папку /media/editors/tinymce/skins .

Прочие настройки плагина редактора TinyMCE

Тема — выбор темы (шаблона) редактора для пользователей сайта (из выпадающего списка)

Шаблон администратора — выбор темы (шаблона) редактора для администратора сайта (из выпадающего списка)

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

Перетаскивание изображения — Разрешить перетаскивание для загрузки изображений.

Путь к папке изображений — Введите каталог для загрузки изображений. Если ничего не введено изображения будут загружены в /Images.

Специальные символы — Определяет, каким образом специальные символы будут обрабатываться редактором. Рекомендуемое значение — ‘Не заменять’. Значение ‘Заменять на символьный код’ включает замену специальных символов в тексте на символьные HTML-коды (например, ‘<‘). ‘Заменять на числовой код’ — замена специальных символов в тексте на цифровые HTML-коды символов (например, ‘%03c’). Важно заметить, что использование значений отличных от ‘Не заменять’ может привести к ошибкам при поиске.

Автоматический выбор языка — Если установлено Да, язык редактора будет автоматически выбран в соответствии с языком интерфейса. Не активируйте эту опцию если не установлены соответствующие языки для редактора.

Направление текста — Выбор направления текста по умолчанию.

CSS-классы шаблона — По умолчанию плагин ищет файл editor.css. Если такого файла нет в каталоге шаблона, загружается файл editor.css из каталога системного шаблона.

Пользовательские CSS-классы — Необязательный CSS-файл, который позволяет переопределить стили, заданные в editor.css. Укажите имя файла расположенного в директории CSS текущего шаблона или укажите полный путь к тому CSS-файлу, который вы хотите использовать. Если вы введёте значение в это поле, то это условие отменит действие параметра ‘CSS-классы шаблона’.

Тип ссылок — Какого типа должны быть ссылки, вставляемые в редакторе.

Новые строки — Новые строки будут создаваться с помощью указанного варианта.

Использовать текстовый фильтр Joomla — Если включено, применяется текстовый фильтр из глобальной конфигурации Joomla для каждой группы пользователей. Если выключено, фильтры, определенные здесь, используются для всех групп пользователей.

Запрещённые теги — Теги, которые будут удалены из текста. Не оставляйте это поле пустым — если вы не желаете запрещать какие-либо теги, укажите некий произвольный текст, например, cms. Значение по умолчанию: script,applet,iframe

Разрешенные элементы — Определяет список элементов, которые будут оставлены в тексте после сохранения (по умолчанию используется правило совмещающее спецификации HTML5 и HTML4).

Дополнительные валидные элементы — Позволяет создавать действительные элементы помимо существующего набора правил.

Изменение размера — Включает/выключает кнопку изменения размера.

Растягивание по ширине — Включить/выключить поддержку растягивания по ширине.

Путь элемента — Если включено, показывает набор классов, применённых для выделенного текста.

Кол-во слов — Включить/Выключить подсчёт числа слов.

Дополнительные параметры изображения — Включить/Выключить дополнительные вкладки в диалоге параметров изображения.

Расширенный список — Включает/Выключает возможность устанавливать количество форматов и типов маркеров в списках.

Предупреждение сохранения — Выдаёт предупреждающее сообщение, если редактор закрывается без сохранения изменений.

Контекстное меню — Включить/Выключить контекстное меню.

Специальный плагин — Создать специальный плагин(ы).

Специальная кнопка — Создать специальную кнопку(и).

Источник

Adblock
detector