Здравствуйте подскажите как расширить визуальный редактор? или заменить на другой!
мне нужно - чтоб визуальный редактор имел свойства загрузки картинок и желательно русифицировать его! возможно у когото есть уже готовое решение!? подскажите пожалусто!
Ладно русифицировать я его начал вручную! а вот насчет расширения - проблемно! пробовал найти в сети - подходящий вариант! но из-за того что я не програмист у меня возникают сложности - и слетает редактор! Помогите - у кого есть решение!
В движке используется визуальный редактор TinyMCE. Физически редактор размещен в папке админпанели по соображениям безопасности, а именно в папке http://сайт/admin/js/tiny_mce, и соответственно предназначен только для применения в пределах админпанели. То есть с клиентской стороны магазина этот редактор недоступен чужим, кроме авторизовавшихся менеджеров магазина. Редактор подключается в следующих tpl-файлах дефолтного шаблона админпанели, который сам расположен в папке http://сайт/admin/design/default:
...
...
{* подключаем модуль редактора TinyMCE *}
{include file = '../../common_parts/tinymce.htm'
disabled_state = $settings->имя_некой_настройки}
...
...
По сути в нужных tpl-файлах шаблона админпанели просто подключается внешний модуль соответствующего редактора. Физически этот модуль расположен в папке http://сайт/admin/design/common_parts. Таким образом, если нам потребовалось бы заменить редактор везде или только на отдельных страницах, то в тех tpl-файлах, где желаем заменить редактор, надо лишь изменить имя подключаемого модуля в команде вызова. И разумеется, добавить в папку внешних модулей новый подключаемый модуль (tpl- или htm-файл), для примера предположим это будет CKeditor.htm.
Имя нового модуля и перечень входных параметров на самом деле произвольны, впрочем как и расположение его файлов (располагать в папке внешних модулей, то есть в папке common_parts - это всего лишь рекомендация). Однако при создании другого модуля визуального редактора следует учесть, что на сайте существуют менеджерские настройки касаемо подключить или нет редактор на какую-то из страниц (в верхней части таких страниц есть ссылка настройки). Поэтому в одном из параметров вызова модуля рекомендуется передавать состояние такой настройки, чтобы модуль уже сам решал - подключать себя или нет согласно менеджерскому указанию.
Как пример, такая настройка передается в модуль редактора TinyMCE через произвольно именованный параметр disabled_state. Внутри себя модуль просто проверяет: если мой входной параметр disabled_state не в состоянии TRUE, тогда "рисую" на выход свой контент, иначе вообще ничего не "рисую".
Что касается настройки редактора TinyMCE, то у него есть собственный набор яваскрипт параметров, с помощью которого можно перенастроить редактор желаемым образом. Весь список параметров и что они значат смотрите на официальном сайте редактора TinyMCE. Но типичные значения для самых основных, а также кратко узнать, что означают эти параметры, можно из tpl-файла модуля TinyMCE. Ниже целиком приведен исходный код этого модуля.
{* ================================================================================ Система: Impera CMS | Сайт системы: http://imperacms.com/ | | Модуль: визуальный редактор TinyMCE | Расположение: common_parts/tinymce.htm | | Принимает во входных переменных: | $disabled_state = булевой признак "редактор запрещен" | | Использует другие переменные: | $settings = объект настроек сайта | $admin_folder = имя папки админпанели | $site = полный url корня сайта (то есть http://домен.сайта/ например) | | ================================================================================ *}{strip} {* если не запрещают подключать редактор *} {if !$disabled_state|default:false} {* подключаем скрипт редактора *} <script language="JavaScript" src="{$site|default:''|escape}{$admin_folder|default:''|escape}/js/tiny_mce/tiny_mce.js" type="text/javascript"></script> {* задаем настройки редактора для поля аннотации *} <script language="JavaScript" type="text/javascript"> tinyMCE.init({ {* для каких полей ввода на странице действует эта настройка *} mode: 'specific_textareas', editor_selector: 'editor_small', {* какую тему оформления использовать *} theme: 'advanced', skin: 'default', theme_advanced_path: false, {* какие плагины редактора подключить *} plugins: 'fullscreen,paste', {* параметры форматирования *} apply_source_formatting: false, convert_urls: true, relative_urls: false, remove_script_host: true, verify_css_classes: true, verify_html: true, remove_linebreaks: false, remove_redundant_brs: true, convert_newlines_to_brs: true, force_br_newlines: false, force_p_newlines: true, fix_list_elements: true, entity_encoding: 'named', {* используем стили из шаблона клиентской стороны сайта *} content_css: '../design/{$settings->theme|default:''|escape}/css/style.css', {* на каком языке интерфейс *} language: 'ru', spellchecker_languages: '+Russian=ru,+English=en', {* список допустимых тегов (остальные теги будут удалены) *} valid_elements: '-p,-div,-i/em,-b/strong,-span,-u,-center,-pre,-ul/ol,-li,-a[!href|target=_blank|title],img[!src|class|title],br', extended_valid_elements: '', {* назначения плагинов: advimage - расширение работы с картинками (редактирование параметров) advlink - расширение работы со ссылками (редактирование параметров) emotions - смайлы fullscreen - переключение/возврат в полноэкранный режим inlinepopups - замена модальных окон выпадающими DIV-аналогами insertdatetime - дата, время media - работа с медиа файлами (QuickTime, видео, swf и т.п.) pagebreak - вставка разрыва страницы (моделирование "читать далее" для CMS) paste - вставка из буфера обмена searchreplace - поиск, замена текста table - работа с таблицами visualchars - вставка специальных символов xhtmlxtras - вставка журналистских тегов (цитирование и т.п.) *} {* настройки по кнопкам: bold - полужирный italic - курсив underline - подчеркнутый strikethrough - перечеркнутый justifyleft - выравнивание влево justifycenter - выравнивание по центру justifyright- выравнивание вправо justifyfull - выравнивание по ширине bullist - маркированный список numlist - нумерованный список outdent - уменьшить отступ indent - увеличить отступ cut - вырезать в буфер обмена copy - скопировать в буфер обмена paste - вставить из буфера обмена pastetext - вставить как текст из буфера обмена (если подключен плагин paste) pasteword - вставить из буфера обмена MS Office Word (если подключен плагин paste) selectall - выделить все (если подключен плагин paste) undo - отменить изменение redo - вернуть изменение link - дать ссылку unlink - отменить ссылку image - вставить/редактировать изображение smimage - менеджер изображений (если подключен плагин smimage) cleanup - почистить кривой код help - справка code - редактировать html-код hr - горизонтальная линия tablecontrols - редактирование таблиц (если подключен плагин table) removeformat - удалить форматирование sub - нижний индекс sup - верхний индекс fontselect - выбрать шрифт fontsizeselect - размер шрифта forecolor - цвет текста forecolorpicker - выбор цвета текста backcolor - цвет фона backcolorpicker - выбор цвета фона charmap - таблица символов visualaid - показать невидимые элементы anchor - ссылочный якорь newdocument - новый документ blockquote - кавычки visualchars - специальный символ (если подключен плагин visualchars) search - найти (если подключен плагин searchreplace) replace - заменить (если подключен плагин searchreplace) pagebreak - разрыв страницы (если подключен плагин pagebreak) media - медиа файл (если подключен плагин media) insertdate - дата (если подключен плагин insertdatetime) inserttime - время (если подключен плагин insertdatetime) fullscreen - редактировать в полноэкранном режиме (если подключен плагин fullscreen) emotions - смайлы (если подключен плагин emotions) cite - цитировать (если подключен плагин xhtmlxtras) ins - врезка (если подключен плагин xhtmlxtras) del - устаревшее (если подключен плагин xhtmlxtras) abbr - аббревиатура (если подключен плагин xhtmlxtras) acronym - инициалы, акроним (если подключен плагин xhtmlxtras) *} {* какие кнопки на панели инструментов *} theme_advanced_buttons1: 'fullscreen,|,selectall,cut,copy,pastetext,|,undo,redo,|,bold,italic,underline,bullist,|,link,unlink,image,|,removeformat,cleanup,code', theme_advanced_buttons2: '', theme_advanced_buttons3: '', theme_advanced_buttons4: '', {* положение панелей инструментов *} theme_advanced_toolbar_location: 'top', theme_advanced_toolbar_align: 'left', theme_advanced_statusbar_location: '', theme_advanced_resizing: false, {* настройки для плагина InsertDateTime *} plugin_insertdate_dateFormat: '%d %B %Y года (%A) ', plugin_insertdate_timeFormat: 'в %H:%M ', {* настройки для плагина PageBreak *} pagebreak_separator: '<!-- my page break -->', {* настройки для плагина Paste *} paste_auto_cleanup_on_paste: true }); </script> {* задаем настройки редактора для поля полного текста *} <script language="JavaScript" type="text/javascript"> tinyMCE.init({ {* для каких полей ввода на странице действует эта настройка *} mode: 'specific_textareas', editor_selector: 'editor_big', {* какую тему оформления использовать *} theme: 'advanced', skin: 'default', theme_advanced_path: false, {* какие плагины редактора подключить *} plugins: 'fullscreen,table,paste', {* параметры форматирования *} apply_source_formatting: false, convert_urls: true, relative_urls: false, remove_script_host: true, verify_css_classes: true, verify_html: true, remove_linebreaks: false, remove_redundant_brs: true, convert_newlines_to_brs: true, force_br_newlines: false, force_p_newlines: true, fix_list_elements: true, entity_encoding: 'named', {* используем стили из шаблона клиентской стороны сайта *} content_css: '../design/{$settings->theme|default:''|escape}/css/style.css', {* на каком языке интерфейс *} language: 'ru', spellchecker_languages: '+Russian=ru,+English=en', {* список допустимых тегов (остальные теги будут удалены) *} valid_elements: '-h1[class],-h2[class],-h3[class],-h4[class],-h5[class],-h6[class],' + '-p[class|style],-div[class|style],-i/em,-b/strong,-span[class|style],-u,' + '-center,-pre,-ul[class],-ol[class],-li[class],-a[!href|class|target|title],' + 'img[!src|align|border|class|height|hspace|title|vspace|width],' + '-table[align|border|class|cellspacing|cellpadding|width],-tr,td[class|height|width],' + 'br,hr,-cite,-abbr,-code,-sup,-sub,-font[name|size],button[class],' + '-form,input[class|checked|format|name|notice|title|type|value],' + '-select[class|multiple|name|title],option[selected|value]', extended_valid_elements: '', {* какие кнопки на панели инструментов *} theme_advanced_buttons1: 'fullscreen,|,selectall,cut,copy,pastetext,pasteword,|,undo,redo,fontselect,fontsizeselect,forecolor,backcolor,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent', theme_advanced_buttons2: 'visualaid,|,sup,sub,hr,charmap,blockquote,|,link,unlink,image,|,tablecontrols,|,removeformat,cleanup,code', theme_advanced_buttons3: '', theme_advanced_buttons4: '', {* положение панелей инструментов *} theme_advanced_toolbar_location: 'top', theme_advanced_toolbar_align: 'left', theme_advanced_statusbar_location: '', theme_advanced_resizing: false, {* настройки для плагина InsertDateTime *} plugin_insertdate_dateFormat: '%d %B %Y года (%A) ', plugin_insertdate_timeFormat: 'в %H:%M ', {* настройки для плагина PageBreak *} pagebreak_separator: '<!-- my page break -->', {* настройки для плагина Paste *} paste_auto_cleanup_on_paste: true }); </script> {/if} {/strip}
Так вот если бы теперь потребовалось расширить редактор свойством загрузки картинок, а такое дает его плагин SMImage, то нужно было всего лишь скачать этот плагин и поместить (распаковать) в папку плагинов http://сайт/admin/js/tiny_mce/plugins, потом в параметр plugins: модуля TinyMCE через запятую добавить имя этого плагина, то есть 'fullscreen,table,paste,smimage' и также через запятую вписать то же имя в один из параметров theme_advanced_buttonsN: (где N - число от 1 до 4), чтобы кнопка плагина появилась в нужном месте панели инструментов.
Аналогично действуем для плагина SMExplorer: скачиваем и прописываем в тех же параметрах модуля TinyMCE.
Огромное спасибо! Вы сделали огромную работу - выложи и описав все это! еще раз спасибо - и надеюсь не только мне одному это пригодится!
Может быть пора обновить редактор на новую версию в движке?
Он сейчас удобнее стал и симпатичнее