Исходный код редактора TinyMCE был официально перенесен на сервис GitHub. Существует ряд причин, по которым мы решили перенести TinyMCE с SourceForge и Subversion на GitHub и Git, и я детально поясню чуть ниже, почему мы приняли такое решение. Много других популярных JavaScript библиотек уже переехали на сервис GitHub, так что мы не единственные в своем решении.

Сообщество
Одним из важных элементов TinyMCE есть круг его активных пользователей. Мы получаем много исправлений и доработок кода от пользователей по определенным проблемам, и нам сложно обрабатывать эти исправления. Они могут приходить в различных форматах и касаться различных потребностей. Распределенная система контроля версий решает многие из этих проблем, так как для пользователей удобнее, когда проблема решается локально, а мы потом можем получить исправления к себе на сервер.

Скорость
Серьезной проблемой, связанной с SourceForge, была его производительность. Иногда он работал на скорости модема, когда мы пытались получить подтверждение от хоста Subversion. Мы могли бы перенести svn на свой собственный сервер, но тогда нам пришлось бы платить за трафик и настраивать онлайн просмотр кода.

Визуальный редактор для вашего сайта (TinyMCE)

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

Простота доступа
Что нам понравилось в GitHub, так это то, что он главное внимание уделяет исходному коду. Исходники не распиханы по углам – это центральная часть проекта. GitHub имеет очень простой в использовании интерфейс, и мы до сих пор под впечатлением.

Гибкость
Важной особенностью Git является его распределенная система, что дает нам гораздо больше гибкости. Теперь мы можем разместить репозиторий в другом месте, что позволяет нам держать последние версии на разных хостингах. Это значит, что мы не обязаны использовать GitHub, мы также можем хранить данные на своих серверах в качестве альтернативы, а также объединить данные в случае необходимости. Также мы можем настроить свою собственную систему для обработки исправленного кода. Нам не нужно добавлять всех пользователей в центральный репозиторий, если они являются коммитерами.

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

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

2016-09-21

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

TinyMCE, also known as the Tiny Moxiecode Content Editor, is a platform-independent web-based JavaScript/HTML WYSIWYG editor control, released as open source software under the LGPL by Moxiecode Systems AB. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with content management systems, including Django, Drupal, Joomla!, WordPress and SOY CMS.

Ладно, расслабьтесь. Данная статья будет на доступном русском языке. =)

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений.

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

Как видно из титульного изображения выше, 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 — преобразовывает все теги <textarea> к виду редактора
• specific_textareas — преобразуются только элементы имеющие, указанный в параметре editor_selector селектор или не имеющие селектор, указанный в editor_deselector

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

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

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

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

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

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

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 для сайта. Всем спасибо!

Мои настройки редактора TinyMCE

Автор: Кудашев Сергей

Практически каждый веб-мастер использует тот или иной визуальный редактор (WYSIWYG) для размещения контента на сайте. Визуальные редакторы позволяют не только работать с HTML как с обычным текстом в текстовом редакторе, но и обладают функционалом, облегчающим жизнь вебмастеру. Однако последнее может не только упростить жизнь, но и усложнить.

В MODX Revolution в основном пользуюсь редактором TinyMCE , который устанавливается отдельным пакетом. Говорить о его достоинствах и недостатках не буду, а коснусь сегодня только тех моментов, которые я использую для облегчения работы с ним.

Дефолтные настройки

Сразу после установки пакета TinyMCE проверяю в системных настройках блоке tinymce:

Так же меняю опцию convert_urls на No в настройках плагина TinyMCE. Делаю я это, чтобы редактор никак не пытался изменять ссылки, которые я задаю.

Подключение файла стилей

Не всегда подключаю, но иногда это бывает полезным и упрощает работу с контентом.

Делается через указание системной настройки editor_css_path в блоке системных настроек Rich-Text Editor настройка Path to CSS file (Путь до CSS файла) или.

HTML5 тэги

Честно говоря, включение HTML5 тэгов и их обработка по уму у меня не получилась. Поэтому я пошел путем разрешения любых тэгов путем добавления в файл core/components/tinymce/templates/script.tpl после строки после строки

строку

, которая разрешает прохождение любых тэгов. Для желающих заморочиться, этой переменной можно присвоить перечень всех возможных HTML тэгов, включая HTML5 тэги из файла xconfig.js входящего в пакет.

UPDATE: отдельным постом добавил инструкцию, как подружить адаптивные изображения и TinyMCE в MODX Revolution.

Тэги: TinyMCE, Revolution, MODX

Просмотров: 773

Комментариев:

« Логирование PHP на reg.ruПоказать/скрыть элемент на странице »

Главная / Файлы / Скрипты и Flash / Javascript скрипты / HTML редакторы / TinyMCE визуальный HTML редактор для сайта

---

TinyMCE в textarea

TinyMCE визуальный HTML редактор для сайта 23.11.2010 сайт: tinymce.moxiecode.com условия использования: бесплатно

Один из лучших визуальных HTML редакторов для сайта написанных на javascript.

Работает со всеми популярными браузерами.
Простая установка, крепится к любому <textarea> тегу.
После установки, нужное вам текстовое поле превращается в визуальный HTML редактор.
Огромное количество настроек.
Демонстрация скрипта и примеры находятся в архиве с самим скриптом.

Вот демонстрация работы скрипта, это обычное текстовое поле <textarea> с установленным html редактором TinyMCE

---

Комментарии

RSS комментарии

04.01.2011 Саныч2010
А где *.exe файл? В архиве его нет!!!

---

04.01.2011 админ
Саныч2010, это же javascript для сайта.

---

10.03.2011 EXE
Какой EXE!!! это же не программа windows!

---

12.03.2011 Герман
Я скачал архив. Там папки и файлы. Скинул всё это дело в корень сайта. А какой код вставлять в нужное мне место? Ну чтобы там появился этот редактор визуальный? Взял код вставки у вас с сайта, ну тот код что используется для отображения редактора сверху, так вот он работате но частично, таблицы не вызываются и якоря и всё такое, видимо чего то не хватает а вот чего? Скажите пожалуйста какой код вставлять на страницу?

---

13.03.2011 админ
В архиве есть примеры использования, можно рассмотреть их.
Привожу пример вызова на моем сайте

<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript"><!—
tinyMCE.init({
language : "ru",
mode : "exact",
elements : "test",
theme : "advanced",
plugins : "safari, spellchecker, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu,paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, pagebreak",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect, fontsizeselect",
theme_advanced_buttons2_add : "separator, insertdate, inserttime, preview, separator, forecolor, backcolor",
theme_advanced_buttons2_add_before: "cut, copy, paste, pastetext, pasteword, separator, search, replace, separator",
theme_advanced_buttons3_add_before : "tablecontrols, separator",
theme_advanced_buttons3_add : "emotions, iespell, media, advhr, separator, print, separator, ltr, rtl, separator, fullscreen",
theme_advanced_buttons4 : "insertlayer, moveforward, movebackward, absolute, |, styleprops,|, spellchecker, cite, abbr, acronym, del, ins, attribs,|,visualchars, nonbreaking, template, blockquote, pagebreak,|, insertfile, insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : true,
apply_source_formatting : false,
valid_elements : "*[*]", // разрешены все элемиенты html и их атрибуты
remove_linebreaks : false,
forced_root_block : '',
spellchecker_languages : "+English=en,Danish=da, Dutch=nl, Finnish=fi, French=fr, German=de, Italian=it, Polish=pl, Portuguese=pt, Spanish=es, Swedish=sv"
});
// —></script>

<textarea id="test" name="test" rows="15" cols="80" style="width: 80%;"> </textarea>

---

10.04.2011 Max-php
Классный редактор и главное легко подключается, респект авторам сайта что дали ссылку!!!

---

17.04.2011 Максим
Ерунда полная не качайте

---

19.04.2011 админ
Максим, почему ерунда?

---

19.04.2011 Алексей
Максим прав!
Ерунда мало того чо и у вас на сайте косяков с редактром много!!!
Так когда я его пытался себе интегрировать в самом скримте опера столько ошиьок нашла что ппц!!!

---

25.04.2011 Olegman
Отличная штука.

---

26.06.2011 Егор
А будет ли он работать,если на страницу подключена библиотек jquery версии 1.6.х или выше?

---

28.06.2011 Виктор
Егор, попробуйте.
И было бы не плохо, если бы вы написали, работает или нет

---

01.07.2011 Magick
Харе обсерать скрипт… Лузеры поставить не могут вот и арут….

---

03.07.2011 Mixa
А кто знает как к нему подключается fileBrowser, чтобы картинки, флешки и прочее можно было загружать на сервер и вставлять в текст? Рекомендую также отличный WYSIWYG редактор CKEDITROR. Там такая штука называется CKFINDER.

Очень удобно!

---

25.07.2011 Panamar8
Спасибо за ссылку

---

07.08.2011 Мудак
Научите работать со слоями. Нихрена не понятно, ставишь новый слой, а на сайте он появляется в правом верхнем углу.

---

12.08.2011 Виктор
Мудак, вопрос явно не в тему.

---

10.10.2011 Николай
Мне кажется, что надо бы одному нормальному web-програмисту описать подробно как подключить и всё и всем станет ясно, а не общаться с какими-либо недомолвками.

---

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

---

31.10.2011 Сергей
Пардон, таблицы вставляет )))
но с вордом все же лажается, причем пробовал даже на другом сайте
http://www.tinymce.com/tryit/full.php

---

123

Добавить свой комментарий