просто блог
В предыдущей теме было рассуждение на тему выбора WYSIWYG редакторов. Где я рассказал почему я выбрал TinyMCE. Теперь немного расскажу об подключение и улучшение TinyMCE.
Установка.
Скачиваем последнюю версию с сайта http://tinymce.moxiecode.com/download.php. Если хотите что б работал как плагин для jQuery, то соответственно качаем jQuery package, если хотите самостоятельным скриптом, то качаем Main package. И там же качаем архив русификации.
Распаковываем на сервер, например в папку /js/tiny_mce/
И в начало страницы, где у нас форма, вставляем код
Русификация
При скачивание архива с сайта, скрипт с компонентами качается английский. Для того что бы русифицировать, надо скачать отдельно русские языковые файлы. Но как установить их не сказано.
Хоть это и просто, расскажу. Сначала надо распаковать файлы в папку со скриптом именно так же как в архиве, не в коем случае не путать папки.
Затем в скрипте подключения, написанном выше, добавить строчку
Файловый менеджер
MCFileManager и MCImageManager на сайте продаются, и за громадные деньги, что меня ну ни как не устраивает, пришлось искать хорошую альтернативу. На http://habrahabr.ru/ нашлась статейка где вкратце рассказывается про этот плагин. Автором плагина является Андрей Антонов aka andreydust. Сам плагин можно посмотреть и скачать на его сайте.
После скачивания, распаковываем его в папку tiny_mce/plugins/images/
И подключаем его, добавлением всего одного слова images, в двух местах
1) подключаем сначала сам плагин
2) теперь добавляем саму кнопку плагина в том месте где хотим видеть. У меня вот так
Теперь открываем файлы config.php и yoursessioncheck.php
в папке js/tiny_mce/plugins/images/connector/php/
Прописываем в файле config.php пути к папкам с картинками и файлами, относительно главной папки вашего сайта (. не скрипта, а сайта. ). Предварительно создав их, и присвоив им права CHMOD 777.
в файле yoursessioncheck.php.php
комментируем все строчки, если не боитесь за безопасность или пробуем узнать какой переменной проходит аутентификация и вбиваем туда, но это не во всех движках работает. Поэтому если вы за комментируете эти строчки, то молитесь что б к вам не пришли злые дяденьки и не начали издеваться над вашим сайтом, и придется надеется и ждать что придумают новый способ защиты скрипта.
Если вы все правильно сделали, то ваш TinyMCE должн работать и радовать вас!
Визуальный редактор для вашего сайта (TinyMCE)
Наверно мой уважаемый читатель не раз сталкивался с ситуацией, когда конечный веб-проект ориентировался не на узкий круг веб-программистов или людей «введенных» в систему, а исключительно начинающих людей, для которых наиболее важным аспектом является, безусловно, простота и практичность, а самое основное это конечно ассоциативность и красота.
Недавно мне пришлось разрабатывать проект для организации писателей Украины, в которой, безусловно, программистов «очень много», и нужно было искать решение для упрощения интерфейса системы, особенно это касалось написания статей, и прочего редактируемого вручную содержания сайта.
Я испробовал приличное множество систем визуального редактирования, и безусловно о каждой из них у меня сложилось определённое впечатление: как хорошее, так и плохое.
В рамках данного проекта я испробовал три системы визуального редактирования, которые, безусловно, достойны внимания, и будут рассмотрены в данной статье. Это следующие программы: TinyMCE, WYM Editor, HTMLArea.
Ну конечно в один ряд эти программы ставить нельзя, хотя бы по их функционалу и назначению. Это было бы равносильно сравнивать возможности встроенного редактора Notepad и коммерческого Microsoft Word. Ведь каждая эта программа особенная, и относится к определённому классу. Посему сегодня мы поговорим именно о ней.
Сказание о TinyMCE
Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, «портативностью», ассоциативностью, и при всё при этом — относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW — W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.
Что ж, чтобы не быть голословным, и не занимать большую часть статьи рекламой и похвалами, я покажу вам систему в режиме реального времени.
Чтобы загрузить себе версию системы, вам необходимо зайти на сайт http://tinymce.org и скачать себя последнюю версию, после чего читать дальше моё повествование.
Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?
Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.
Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:
В данном простейшем случае в качестве поля для редактирования мы увидим редактор с минимальным набором функций для стандартного форматирования текста, но не больше. Подобный подход можно применить в рамках проекта по созданию чата, форума, гостевой книги и прочего. Для более же сложных вариантов у нас есть дополнительный набор функций и методов, о которых мы сейчас и поговорим.
Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса — init().
В случае ‘textareas’ мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.
В свою очередь элемент ‘theme’ означает ничто иное, как текущий тип оформления редактора и может принимать значения: ‘simple’ и ‘advanced’.
В нашем случае, когда мы используем тип ‘simple’, мы подключаем исключительно стандартные функции редактора, и при этом не может особо менять его функционал, как я уже говорил — это вполне сгодится для малых проектов, а так же для тех, в которых необходима высокая скорость соединения.
Теперь давайте рассмотрим работу с редактором во время включённого режима темы ‘advanced’.
В этом случае мы имеем гибкий в редактировании интерфейс, полное редактирование всех используемых редактором функций, а так же ещё несколько моментов.
Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word’а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: «А куда нужно нажать?», «А почему оно не показывает:.», «А куда делся весь текст»:
Для более редкого возникновения подобных вопросов (но ведь от них никуда не деться 🙂 мы сейчас немного изменим, текущий вариант редактора и добавим следующие функции:
1. Автоматическое форматирование вставляемого текста
2. Добавим функции форматирования
3. Изменим расположение панелей управления
4. Зададим язык редактора
5. Добавим проверку орфографии
Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:
1. Панель форматирования находится сверху
2. Панель состояния отсутствует
3. Язык редактора — русский
4. Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.
5. Функции структурного форматирования: таблица, выравнивание, табуляция, список
6. Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции «отката» и «возврата», ну и, наверное, введём печать.
Что ж, формализация задания есть, теперь давайте решим, как мы будем это воплощать в жизнь.
Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка — ‘paste_auto_cleanup_on_paste’, который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.
При использовании данного параметра следует так же использовать и следующие параметры:
Ну, я их не озвучиваю, так как их названия и так ассоциативны. Что ж, со вставкой мы проблему решили, и теперь нам необходимо решить ещё несколько задач, поставленных нами ранее. Но давайте сейчас поговорим про панели программы, так как это довольно важно при проектировании визуального отображения редактора.
Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).
На первой панели размещаются функциональные кнопки, а так же другие средства для форматирования и редактирования текста.
Каждая из этих панелей может иметь своё положение (снизу или сверху), то есть у нас есть возможность довольно гибко менять их положения в редакторе. Для этого можно воспользоваться параметрами:
При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении ‘none’, то панель вообще не будет отображена.
И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).
Итак, с панелями разобрались, но ведь на них следует добавить что-то?
Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?
Для размещения, элементы, или же другими словами — кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.
Хотя про набор вы можете, особо не беспокоится, так как по-умолчанию в панели инструментов вы и так сможете найти стандартный набор необходимых функций выравнивания, форматирования и прочего, но это доступно лишь в режиме темы ‘advanced’.
Для задания языка редактора нужно всего лишь добавить параметр ‘language’ со значением ‘ru’.
Что ж, давайте посмотрим, что вышло у меня:
Вот — это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.
Что ж, давайте рассмотрим его анатомию. Сначала мы передаём наиболее важные параметры, а именно: метод «замены» текстовых полей, тип темы редактора, язык редактора, а так же список подключаемых плагинов. Кстати о них. Насколько вы заметили, если внимательно читали, то в рамках данного текста мы их ещё не разу не упоминали.
Плагины — некоторые внешние модули, которые необходимы для воплощения тех либо иных функций программы. Плагины размещаются в папке `plugins`, откуда подключатся к программе в момент вызова. Для использования плагинов в программе, их сначала необходимо перечислить через запятую, в качестве параметров элемента `plugins`, после чего добавить соответствующую кнопку на панель, для их использования.
Так же в рамках примера в листинге 1.2, мы использовали плагин inserdate, для котрого позже задали параметр dateFormat и timeFormat, которые вводят формат используемого времени и даты, соответственно. Они задаются в соответствии со спецификацией функции временных меток.
Так же стоит упомянуть другие интересные функции, использованные в примере:
* paste_remove — при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры spaи.
* paste_convert_headers_to_strong — при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы
* paste_auto_cleanup_on_paste — фильтр для данных из буфера обмена (применимо к данным из MS Word)
Вот, по-моему, для общего обзора системы хватит. Однако мы ещё не рассмотрели довольно большое количество методов API-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.
Как вы уже поняли, редактор является платформенным 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).
Инструкция полностью применима для редактора версии 3.5.11. Для более поздних версий методология работы с редактором так же должна быть аналогичной.
Установка и настройка TinyMCE
1. Скачиваем свежую версию редактора здесь и распаковываем.
2. Копируем содержимое архива в нужную вам директорию сайта.
3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:
4. Инициализируем редактор при помощи JavaScript кода:
5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.
Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:
Инициализация редактора и его параметры
Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:
mode [textareas|exact|specific_textareas|none] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.
theme [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 для сайта. Всем спасибо!
Лучший способ сказать автору «СПАСИБО» рассказать друзьям или поделиться ссылкой!
Другие статьи:
В этой статье Мы покажем Вам, как сделать так, чтобы шапка сайта выезжала при прокрутке страницы вверх, но при этом скрывалась при прокрутке страницы вниз, чтобы не загораживать нам просмотр самой страницы.
DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.
В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.
Метод, который мы рассмотрим ниже, позволяет размещать информацию на страницах любого пользователя или группы,к которому имеет доступ авторизованный пользователь.
_620x377.jpg)
С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.
Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.
Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.
В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel
Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: «Писать или не писать smtp клиент с нуля?».
Установка и настройка TinyMCE. Правильная стыковка со Smarty
Среди визуальных онлайн текстовых редакторов WYSIWYG (What You See Is What You Get) наиболее популярным является TinyMCE. Он имеет фактически все необходимое для работы с текстом и функционально подобен работе с Microsoft Word с дополнениями, необходимыми для специфической работе с вебом: переходом от визуального текстового представления к HTML-редактору, очисткой лишнего кода, вставкой текста из Word (позволяет избавиться от лишних символов форматирования), добавления смайликов и т.п. Единственное, что разработчиками дается платно — это менеджеры загрузок для изображений и файлов (два отдельных модуля-плагина).
Итак, сама установка, если вы используете нативный PHP без всяких «шаблонных примочек» типа Smarty, проблем с установкой быть не должно.
Сначала вы скачиваете последнюю версию TinyMCE (http://www.tinymce.com/download/). Тут можно выбрать одну из двух вариантов версий — обычная и с использованием jQuery. Распаковывайте архив в папку вашего сайта (в моем примере он будет в папке js, расположенной в корне сайта).
Параллельно с этим скачиваете архив с русификацией (http://tinymce.moxiecode.com/download_i18n.php). Распаковываем его в папку /js/tinymce/jscripts/tiny_mce. То есть, там, где есть каталоги lang, plugins и т.п.
Теперь в нужном php или html файле добавляем:
И в данном случае все элементы textarea поменяются на визуальные редакторы TinyMCE. Все достаточно просто. Конфигурацию кнопок и плагинов можно изменять по своему усмотрению. К тому же мы сейчас рассмотрели более сложный вариант, с темой «advanced». Есть и еще одна — «simple», в которой дается минимальный набор, и для подключения достаточно вписать просто:
Также стоит указать на один важный момент. В описанном выше случае все поля textarea заменяются редакторами TinyMCE, но иногда этого не требуется — достаточно обычных текстовых полей. Как это реализовать? На самом деле очень просто. В настройках TinyMCE добавляем одну строку:
И теперь в textarea можно указать переключатель как класс…
Вариант с менеджерами загрузки файлов и изображений можно решить и бесплатным образом. Для этого можно воспользоваться плагином Image Manager Андрея Антонова, который скачивается здесь (http://dustweb.ru/projects/tinymce_images/). Скачивается также в виде архива, который потом нужно распаковать в каталог plugins в папке tiny_mce. Таким образом, там появится новая директория images.
В ней мы заходим в …/tiny_mce/plugins/images/connector/php/, где открываем два файла: config.php и yoursessioncheck.php. В config.php указываем директории для сохранения изображений и файлов. Чтобы все работало успешно, установите права доступа на эти папки как CHMOD 777. В файле yoursessioncheck.php отключен комментариями блок кода проверки сессии. Если вам не требуется соблюдать безопасность ввода данных, то можно оставить все как есть, т.е. закомментированным, это может быть актуально в некоторых случаях для фронт-энда. Но, например, в моем случае, чаще всего визуальный редактор и вставка файлов и изображений реализуется в рамках админ-панели, то есть, бэк-энда, поэтому проверка делается. В общем, это на ваше усмотрение.
Для подключения Image Manager к TinyMCE нужно вставить слово «images» в список plugins нашего кода (для theme:advanced), а также в кнопки theme_advanced_buttons1.
Альтернативой Image Manager может послужить Tiny Browser, с версии 1.4.2 он стал платным ($6), так что вы можете попробовать поискать его более ранние версии, хотя Image Manager удовлетворяет всем необходимым потребностям.
Не знаю, стоит ли тут поднимать вопросы компрессии TinyMCE, но на страничке, откуда вы скачивали редактор, есть архив с компрессором. При подключении могут возникать некоторые проблемы, поэтому, если вы хотите использовать решение с сжатием, то информацию по этому поводу можно найти в интернете.
Я сам Smarty не использую, но нередко бывают ситуации, когда требуется расширить функционал уже разработанных сайтов, как в админ-панелях, так и на фронт-энде.
Integration and setup options
Essential editor configuration, including `selector` and `plugins` keys.
auto_focus
Type: String
Example: Using auto_focus
base_url
This option lets you specify the base URL for TinyMCE. This is useful if you want to load TinyMCE from one location and things like the theme and plugins from another.
By default, the base_url is the directory containing TinyMCE javascript file (such as tinymce.min.js ).
Type: String
Example: Using base_url
cache_suffix
This option lets you add a custom cache buster URL part at the end of each request tinymce makes to load CSS, scripts, etc. Just add the query string part you want to append to each URL request, for example “?v=4.1.6”.
Type: String
Example: Using cache_suffix
content_security_policy
This option allows you to set a custom content security policy for the editor’s iframe contents.
Type: String
Example: Using content_security_policy
external_plugins
This option allows you to specify a URL based location of plugins outside of the normal TinyMCE plugins directory.
TinyMCE will attempt to load these as per regular plugins when starting up. This option is useful when loading TinyMCE from a CDN or when you want to have the TinyMCE directory separate from your custom plugins.
This value should be set as a JavaScript object that contains a property for each TinyMCE plugin to be loaded. This property should be named after the plugin and should have a value that contains the location that the plugin that will be loaded from.
The URLs provided can be:
Type: Object
Example: Using external_plugins
hidden_input
The hidden_input option gives you the ability to disable the auto-generation of hidden input fields for inline editing elements. By default all inline editors have a hidden input element in which content gets saved when an editor.save() or tinymce.triggerSave() is executed.
The hidden_input option can be disabled if you don’t need these controls.
Type: Boolean
Default Value: true
Example: Using hidden_input
init_instance_callback
The init_instance_callback option allows you to specify a function name to be executed each time an editor instance is initialized. The format of this function is initInstance(editor) where editor is the editor instance object reference.
Type: JavaScript Function
Example: Using init_instance_callback
You may also want to take a look at the setup callback option as it can be used to bind events before the editor instance is initialized.
plugins
This option allows you to specify which plugins TinyMCE will attempt to load when starting up. By default, TinyMCE will not load any plugins.
Type: String
Example: Using plugins
Note: Each plugin entry should be separated by a blank space.
readonly
Setting the readonly option to true will initialize the editor in «readonly» mode instead of editing ( «design» ) mode. Once initialized, the editor can be set to editing ( «design» ) mode using the tinymce.editor.mode.set API.
Type: Boolean
Default Value: false