Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Как расширить визуальный редактор? Или заменить на другой!

Следить
Главная
15:06
23 ноя
#
?
pikasso написал:

Здравствуйте подскажите как расширить визуальный редактор? или заменить на другой!

мне нужно - чтоб визуальный редактор имел свойства загрузки картинок и желательно русифицировать его! возможно у когото есть уже готовое решение!? подскажите пожалусто!

19:42
23 ноя
#
?
pikasso написал:

Ладно русифицировать я его начал вручную! а вот насчет расширения - проблемно! пробовал найти в сети - подходящий вариант! но из-за того что я не програмист у меня возникают сложности - и слетает редактор! Помогите - у кого есть решение!

15:41
25 ноя
#
Разработчик написал:

В движке используется визуальный редактор TinyMCE. Физически редактор размещен в папке админпанели по соображениям безопасности, а именно в папке http://сайт/admin/js/tiny_mce, и соответственно предназначен только для применения в пределах админпанели. То есть с клиентской стороны магазина этот редактор недоступен чужим, кроме авторизовавшихся менеджеров магазина. Редактор подключается в следующих tpl-файлах дефолтного шаблона админпанели, который сам расположен в папке http://сайт/admin/design/default:

  • admin_article.htm   -   редактирование статьи
  • admin_brand.htm   -   редактирование бренда
  • admin_category.htm   -   редактирование категории
  • admin_country.htm   -   редактирование страны
  • admin_credit_program.htm   -   редактирование кредитной программы
  • admin_delivery.htm   -   редактирование способа доставки
  • admin_file.htm   -   редактирование медиа файла
  • admin_news_item.htm   -   редактирование новости
  • admin_payment.htm   -   редактирование способа оплаты
  • admin_product.htm   -   редактирование товара
  • admin_products_kit.htm   -   редактирование комплекта товаров
  • admin_region.htm   -   редактирование области
  • admin_school.htm   -   редактирование учебного заведения
  • admin_section.htm   -   редактирование специальной страницы
  • admin_stock.htm   -   редактирование склада
  • admin_town.htm   -   редактирование города


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

    ...
    ...

    {* подключаем модуль редактора 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.ru/                                              |
                                                                                  |
  Модуль: визуальный редактор 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.

16:18
27 ноя
#
?
pikasso написал:

Огромное спасибо! Вы сделали огромную работу - выложи и описав все это! еще раз спасибо - и надеюсь не только мне одному это пригодится!

02:48
02 янв
#
?
Виктор написал:

Может быть пора обновить редактор на новую версию в движке?
Он сейчас удобнее стал и симпатичнее

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

Существующие в списке оценки по 5-бальной шкале не должны учитываться при выборе, так как носят субъективный характер и касаются соотношения цена-качество-скорость только для самых дорогих тарифных планов.

Демо Главная Хронология Соглашение Материалы Контакты