admin / 28.05.2018
.
Исходный код редактора TinyMCE был официально перенесен на сервис GitHub. Существует ряд причин, по которым мы решили перенести TinyMCE с SourceForge и Subversion на GitHub и Git, и я детально поясню чуть ниже, почему мы приняли такое решение. Много других популярных JavaScript библиотек уже переехали на сервис GitHub, так что мы не единственные в своем решении.
Сообщество
Одним из важных элементов TinyMCE есть круг его активных пользователей. Мы получаем много исправлений и доработок кода от пользователей по определенным проблемам, и нам сложно обрабатывать эти исправления. Они могут приходить в различных форматах и касаться различных потребностей. Распределенная система контроля версий решает многие из этих проблем, так как для пользователей удобнее, когда проблема решается локально, а мы потом можем получить исправления к себе на сервер.
Скорость
Серьезной проблемой, связанной с SourceForge, была его производительность. Иногда он работал на скорости модема, когда мы пытались получить подтверждение от хоста Subversion. Мы могли бы перенести svn на свой собственный сервер, но тогда нам пришлось бы платить за трафик и настраивать онлайн просмотр кода.
Содержание
Также, в связи с тем, что мы решили двигаться вперед, мы могли бы найти альтернативные SCM системы.
Простота доступа
Что нам понравилось в GitHub, так это то, что он главное внимание уделяет исходному коду. Исходники не распиханы по углам – это центральная часть проекта. GitHub имеет очень простой в использовании интерфейс, и мы до сих пор под впечатлением.
Гибкость
Важной особенностью Git является его распределенная система, что дает нам гораздо больше гибкости. Теперь мы можем разместить репозиторий в другом месте, что позволяет нам держать последние версии на разных хостингах. Это значит, что мы не обязаны использовать GitHub, мы также можем хранить данные на своих серверах в качестве альтернативы, а также объединить данные в случае необходимости. Также мы можем настроить свою собственную систему для обработки исправленного кода. Нам не нужно добавлять всех пользователей в центральный репозиторий, если они являются коммитерами.
Недостатки
Но в переходе на Git также есть и недостатки. Например, некоторым разработчикам будет сложно понять концепцию Git. Существует мало клиентов, с которыми Git может графически работать. Также некоторые пользователи имеют внешние ссылки со своих репозиториев на наше.
2016-09-21
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. Для более поздних версий методология работы с редактором так же должна быть аналогичной.
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<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 для сайта. Всем спасибо!
Автор: Кудашев Сергей
Практически каждый веб-мастер использует тот или иной визуальный редактор (WYSIWYG) для размещения контента на сайте. Визуальные редакторы позволяют не только работать с HTML как с обычным текстом в текстовом редакторе, но и обладают функционалом, облегчающим жизнь вебмастеру. Однако последнее может не только упростить жизнь, но и усложнить.
В MODX Revolution в основном пользуюсь редактором TinyMCE , который устанавливается отдельным пакетом. Говорить о его достоинствах и недостатках не буду, а коснусь сегодня только тех моментов, которые я использую для облегчения работы с ним.
Сразу после установки пакета TinyMCE проверяю в системных настройках блоке tinymce:
Так же меняю опцию convert_urls на No в настройках плагина TinyMCE. Делаю я это, чтобы редактор никак не пытался изменять ссылки, которые я задаю.
Не всегда подключаю, но иногда это бывает полезным и упрощает работу с контентом.
Делается через указание системной настройки editor_css_path в блоке системных настроек Rich-Text Editor настройка Path to CSS file (Путь до CSS файла) или.
Честно говоря, включение 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 |
Один из лучших визуальных HTML редакторов для сайта написанных на javascript.
Работает со всеми популярными браузерами.
Простая установка, крепится к любому <textarea> тегу.
После установки, нужное вам текстовое поле превращается в визуальный HTML редактор.
Огромное количество настроек.
Демонстрация скрипта и примеры находятся в архиве с самим скриптом.
Вот демонстрация работы скрипта, это обычное текстовое поле <textarea> с установленным html редактором TinyMCE
RSS комментарии
04.01.2011 Саныч2010
А где *.exe файл? В архиве его нет!!!
<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>
Очень удобно!
123
FILED UNDER : IT