Небольшая модификация TinyMCE для удобства форматирования текста

Главные вкладки

Аватар пользователя botan botan 25 октября 2007 в 16:01

К примеру, когда мы используем любой вузивуг для создания материала мы преследуем в принципе одну цель - форматирование текста.
В последний момент столкнулся с задачей что опытный пользователь может нормально справиться с этим и никаких проблем не возникнет .. рядовые редакторы увы разочаровывают -(( текст получается просто ужасным .. вместо нормального выделения абзаца тегом <p> мы получаем несколько подряд следующих <br /> .. удручает .. обычно это бывает в связи с тем, что они копируют из Ворда.
Так вот, небольшая модификация сделает им памятку! Что бы помнили!
Начнём ..

Так мы видим обычный визуальный редактор по-умолчанию:
Подсветка блоков в tinyMCE

Многие скажут, а вроде бы с виду все хорошо и все правильно, что тут такого?
Собственно особо такого плохого тут нету, просто уж если следовать стандартам w3.org, то тут есть ошибки, применив хак это можно увидеть:
Подсветка блоков в tinyMCE

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

Что нужно что бы так сделать? Да особо ничего, просто прописать нужный стиль в CSS.
Приведу реализацию для TinyMCE, думаю что для остальных работающих на нём подойдёт тоже.

1. Нужно сделать эти масенькие картиночки, ибо по-другому использую только CSS сделать нельзя. Можно нарисовать самому, или взять у готовые http://shtrix.ru/botan/form.zip, распаковываем и копируем в папку темы advanced, в каталог images, модуля tinymce.
У меня к примеру это тут "/sites/all/modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/images/form/"
2. Далее берём файл editor_content.css, который у вас подгружается, например у меня это - "/sites/all/modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css" и просто дописываем туда несколько строк ...

/* make HTML blocs visible */
p,h1,h2,h3,h4,h5,h6,blockquote,
pre{ background: #eee no-repeat 2px 2px;
        padding: 8px 5px 5px !important;
        margin: 10px !important;
}

/* labels */
p{ background-image: url('../images/form/lbl-p.png'); }
h1{ background-image: url('../images/form/lbl-h1.png'); }
h2{ background-image: url('../images/form/lbl-h2.png'); }
h3{ background-image: url('../images/form/lbl-h3.png'); }
h4{ background-image: url('../images/form/lbl-h4.png'); }
h5{ background-image: url('../images/form/lbl-h5.png'); }
h6{ background-image: url('../images/form/lbl-h6.png'); }
blockquote{ background-image: url('../images/form/lbl-blockquote.png'); }
pre{ background-image: url('../images/form/lbl-pre.png'); }

Теперь главное убедитесь что этот css файлик у вас не закешировался!!!
Иначе когда будете проверять у вас ничего не измениться!

И ещё такая вот дилемма .. в принципе всё описанное тут работает, но смущает лишь одно, нужно ковыряться в файлах и т.д.
Хорошо, картинки можно просто тупо закачать в папку /files, но как применить стиль?
В стандартном модуле тини есть настройка стилей 3 видов. Общий стиль темы, свой стиль и стиль по-умолчанию.
Проблема в том, что комбинировать нельзя, т.е. можно использовать только одну из этих опций.
Проблема первого в том, что при добавлении в стиль темы на самом сайте это будет выглядеть так же. Не подходит.
Проблема второго, использовать отдельный css нельзя потому что если добавить только стили для блоков, то вся стилистика темы улетает, можно конечно сделать два одинаковых файла, один для темы, другой для тини, и для тини дописать нужные стили, но тогда будет проблема при редактировании стиля темы, нужно будет менять два файла, что не верно. Также при переключении темы будут проблемы.
Третий в принципе не подходит.

Поэтому красивого решения я не нашёл, только так, ручками Sad Есть конечно идея предложить разработчикам немного модифицировать модуль для доп настройки. Или вставлять по-умолчанию, но это не верно, вдруг кому то не нужно?
Поэтому буду благодарен за любой совет что бы сделать красивое решение этой проблемы.

PS Эта, вопрос .. тут какие то проблемы с аттачем файликов или я один такой неудачник, который не смог это сделать? Smile

Комментарии

Аватар пользователя proxer proxer 26 октября 2007 в 17:35

Полезная мысль +1, в закладки.
Действительно с CSS нада додумывать, но считаю, что нет ничего нереального :).
На сайте, который я разрабатываю недавно прикрутил TinyMCE и этот вопрос действительно актуальный. Тем более, что как правило, такие редакторы устанавливаются не для нас с вами :). Навскидку всплыла мысль о компоновке CSS для Tiny «на лету». Когда-то видел компоновщик, который склеивал несколько CSS файлов, при возможности браузера принимать gzip-сжатые файлы еще и сжимал. Думаю эту тему есть смысл проработать. Ага, вот, нашел:
http://rakaz.nl/extra/code/combine. Частичный перевод тут: http://www.realcoding.net/article/view/4619.
Он кстати и с JS так может, что есть два зайца...
Причем заметил, что если на body страницы поставлен фон, то он отображается и на окне TinyMCE. Также нарушаются вложенные стили, которые описываются как, к примеру: .squeeze ulВидимо из-за того что в окне нет div разметки, а только сам контент ноды.
Также созрел ТУДУ: прикрутить к тини плагинчег чтобы кнопкой включать/выключать подсветку.

ЗЫ: немного оффтопик, но может быть полезным — решил проблему с файл менеджером для тини (родной к нему платный) под Друпалом, методом прикручивания к нему файл-менеджера из FCKEditor. Подробнее тут: nesov.org.ua

Аватар пользователя botan botan 26 октября 2007 в 10:43

2proxer, если честно, то не могу сказать что я вообще хоть как то разбирался в работе вуз. редакторов с точки зрения работы JS Sad Уж так вышло Smile Поэтому создание кнопочки "включения/выключения" будет наверное проблематично, хотя не думаю что сложно, главное понять как работает.

По поводу компоновщика, в принципе идея не плохая, я бы даже сказал очень хорошая, но она не будет востребована на маленьких сайтах визитках, ИМХО. Потому что там и так все будет "летать", для крупных проектов очень полезная вещь, но мне кажется это нужно только для оптимизации ресурса, так сказать для ускорения работы. Основывать на нем расширенное управление CSS файлов для тини не очень верно на мой взгляд.

По поводу оффтопика: Да, натыкался я на этот менеджер, но меня немного оттолкнуло то, что там все открывается в всплывающих окнах (как я увидел на скриншотах), при использовании лиса и не особо сильной рабочей машины это не очень удобно, потому что всплывающие JS окна не очень шустро бегают, т.е. открывание не совсем быстрое, хотя возможно у меня просто никсы как то странно себя ведут Smile
Но в любом случае такой плагин как Inline Popups мне очень понравился, если вкратце, то он все последующие плагины открывает не в попап окне, а в диве на той же странице, на мой взгляд очень удобно. Но вышла загвостка с IMCE, он не подчиняется этот плагину, а в принципе довольно приятный image manager. Вот поэтому хочу найти менеджер который подчиняется этому плагину, пока не нашёл -(

Аватар пользователя botan botan 26 октября 2007 в 12:27

Покопался в исходниках, проблема оказалась банальной -) Разработчики модуля не могут подключать (или им просто было лениво это делать) несколько css файлов в tinymce.
При подключении css файла у tinymce есть всего один параметр "content_css: ", причем туда передаётся только одно значение .. поэтому они были вынуждены подключать всего какой то один файлик.

В принципе модификация оказалась схожей с компоновщиком файлом предложенным proxer.
в модуле tinymce.module подключение сторонних css ограничено следующим:
else if ($settings['css_setting'] == 'self') {
$init['content_css'] = str_replace(array('%h', '%t'), array($host, $themepath), $settings['css_path']);
}
?>

немного подумав решил немного расширить функционал, причём на мой взгляд у них ошибка при замене %h, потому что пути там при вложенных файлах будут работать с ошибкой, но это уже левое.
После строчки:
$init['content_css'] = str_replace(array('%h', '%t'), array($host, $themepath), $settings['css_path']);
?>
До окончания цикла вставляем следующий кусок:
$temp_css = explode(";", $init['content_css']); // разбиваем строчку на отдельные файлы с сепаратором ;
if(count($temp_css) > 0){ // если их больше одного, то применяем модификацию
$all_css_styles = ""; // в целях безопасности -)
foreach($temp_css as $current_css){ // объединяем все файлы в одну строку
if(file_exists($current_css)) $all_css_styles .= file_get_contents($current_css); // если файл существует, то читаем его, но работает только в php5, ибо функции file_get_contents есть только в 5 версии, в друпал апи не нашёл функцию чтения файла Sad
}
$filename = md5($all_css_styles); // создаем уникальное имя в зависимости от содержимого css
$file = file_directory_path() . "/" . $filename; // имя делаем во директории "files"
if(!file_exists($file)) file_save_data($all_css_styles, $file, FILE_EXISTS_REPLACE); // если такого файла нету, то создаем
$init['content_css'] = file_create_url($file); // ну и подменяем его
}

?>
Далее настраиваем:

И усё у нас должно работать.

Нужно только учесть что если у вас php4, то вам нужно заменить функцию file_get_contents

Также думаю что недоработка будет немного хреноватой в плане того, что чистить старые временные css файлы придёца вручную Sad

Аватар пользователя proxer proxer 26 октября 2007 в 17:29

Решение на первый взгляд толковое, будем пробовать... Но есть неточность: file_get_contents (PHP 4 >= 4.3.0, PHP 5). Так что все не так плохо :). Что касается комбайнера (combine.php, ссылка выше) думаю есть смысл идти дальше и переопределить функции движка drupal_add_js и drupal_add_css под использование комбайнера, например, с помощью модуля к Друпал. Согласен, в этом есть смысл для массивных проектов, но и кто ж на Друпале визитки строит?
По поводу кнопочки и плагинчега к тини есть темплейт для плагинов (папка /jscripts/tiny_mce/plugins/_template в редакции tinymce_***_dev.zip). Одним глазом видел, думаю реализовать будет не очень сложно.

Аватар пользователя botan botan 26 октября 2007 в 12:43

Вообще чем чаще использую модуль tinyMCE тем больше глюков нахожу, но безусловно он нужен(не мне конечно, но людям, которые далеки до html, но именно они работают с наполнением) и хочется его поправить, ибо только он кроссбраузерный.
Существует также глюк с профилями http://drupal.ru/node/7163

Аватар пользователя botan botan 27 октября 2007 в 23:23

proxer, я тут вот что заметил .. глупо делать модуль предложенный тобой, если у друпала есть кеширование css и js файлов .. "Bandwidth optimizations"

Аватар пользователя NEKT NEKT (не проверено) 25 марта 2008 в 11:40

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