Конечно же гораздо приятнее добавлять и редактировать текст при помощи визуального редактора(WYSIWYG). По умолчанию в Magento Commerce такового нет.
Добавить такой функционал не составляет особого труда. Для начало рассмотрим документацию, представленную на официальном сайте magento, по внедрению wysiwyg. Нам дана исчерпывающая информация по этому вопросу, к установке предлагается два самых распространёных редактора:
- FCKEditor
- TinyMCE
Для magento commerce мы будем устанавливать именно TinyMCE как наиболее корректно работающий со всеми броузерами визуальный редактор.
Итак:
1. Скачиваем дистрибутив TinyMCE с сайта разработчиков по ссылке –
2. Помещаем содержимое папки tinymce/jscripts/tiny_mce/ из скачанного архива в папку js/tiny_mce установленного Magento Commerce.
3. Теперь редактируем файл:
1 | app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml |
находим строку
1 | <script type="text/javascript"> |
и перед ней вставляем блок кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tiny_mce.js') ?>"></script> <script language="javascript" type="text/javascript"> Event.observe(window, 'load', function() { tinyMCE.init({ mode : "exact", theme : "advanced", strict_loading_mode : true, elements : "description,short_description", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", theme_advanced_resize_horizontal : "true", theme_advanced_resizing : "true", apply_source_formatting : "true", convert_urls : "false", force_br_newlines : "true", doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' }); }); </script> |
4. Теперь редактируем файл:
1 | lib/Varien/Data/Form/Element/Editor.php |
в этом файле заменяем блок кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript"> //<![CDATA[ /* tinyMCE.init({ mode : "exact", theme : "'.$this->getTheme().'", elements : "' . $element . '", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", theme_advanced_resize_horizontal : "false", theme_advanced_resizing : "false", apply_source_formatting : "true", convert_urls : "false", force_br_newlines : "true", doctype : \'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\' });*/ //]]> </script>'; |
на другой блок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> Event.observe(window, "load", function() { tinyMCE.init({ mode : "exact", theme : "advanced", strict_loading_mode : true, elements : "'.$this->getHtmlId().'", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", theme_advanced_resize_horizontal : "true", theme_advanced_resizing : "true", apply_source_formatting : "true", convert_urls : "false", force_br_newlines : "true", doctype : "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">" }); }); </script>'; |
5. Заключительный этап. Правим файл:
1 | app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php |
и заменяем блок кода:
1 2 3 4 5 6 7 8 | $fieldset->addField('content', 'editor', ( 'name' => 'content', 'label' => Mage::helper('cms')->__('Content'), 'title' => Mage::helper('cms')->__('Content'), 'style' => 'height:36em;', 'wysiwyg' => false, 'required' => true, )); |
на другой блок:
1 2 3 4 5 6 7 8 | $fieldset->addField('content', 'editor', ( 'name' => 'content', 'label' => Mage::helper('cms')->__('Content'), 'title' => Mage::helper('cms')->__('Content'), 'style' => 'width:98%; height:600px;', 'wysiwyg' => true, 'required' => true, )); |
P.S.: Если все указанные действия были вами правильно выполнены, то в Админпанели по адресу CMS -> Manage Pages(Редактирование Страниц) для добавлени/редактирования контента magento commerce станет доступен визуальный редактор TinyMCE.
Данный метод проверен на версиях 1.1.6-1.2.1 Magento Commerce.