plugin: WYSIWYG en el admin

Fontis acaba de publicar una extension para tener FCKeditor o TinyMCE en los campos de textos del admin.

Para instalarla, el código es:magento-community/Fontis_Wysiwygesta estable.
Para configurarla, vamos a Sistema->Configuración->(Avanzado)Admin y en la ultima pestaña, hay 2 desplegables para elegir cual de los 2 editores preferimos y en cuales textareas lo queremos.

Un plugin muy interesante para el TinyMCE es el Ajax File and Image Manager de www.phpletter.com que permite subir imagenes directamente desde nuestro ordenador. Descargamos la ultima versión (1.0 RC 4, de momento), la descomprimos y copiamos el directorio ajaxfilemanager (con su contenido) en /js/fontis/tiny_mce/plugins. Abrimos el archivo /js/fontis/tiny_mce/plugins/ajaxfilemanager/inc/config.base.php y editamos la ruta del directorio donde vamos a guardar las imagenes que se subiran a traves de este plugin. Por defecto viene:../../uploaded/.
Para Magento, para que las imagenes se guarden en el directorio media, cambiamos las lineas 43-44 de define('CONFIG_SYS_DEFAULT_PATH', '../uploaded/'); //accept relative path only define('CONFIG_SYS_ROOT_PATH', '../uploaded/'); //accept relative path onlya define('CONFIG_SYS_DEFAULT_PATH', '../../../../../media/'); //accept relative path only define('CONFIG_SYS_ROOT_PATH', '../../../../../media/'); //accept relative path only
En este mismo fichero hay que modificar tambien, en la linea 112, reemplazar default por tinymce3. define('CONFIG_EDITOR_NAME', (CONFIG_QUERY_STRING_ENABLE && !empty($_GET['editor'])?secureFileName($_GET['editor']):'tinymce3'));
Ahora tenemos que incluir este plugin en la declaracion del tinyMCE. Abrimos el archivo app/design/adminhtml/default/default/template/fontis/wysiwyg/wysiwyg.phtml y añadimos en la función tinyMCE.init la linea file_browser_callback : "ajaxfilemanager" y despues esta función. Al final, el fichero queda así:<?php /** * Fontis WYSIWYG Editor Extension * * NOTICE OF LICENSE * * This source file is subject to the Open Software License (OSL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/osl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * @category Fontis * @package Fontis_Wysiwyg * @author Peter Spiller * @author Lloyd Hazlett * @copyright Copyright (c) 2008 Fontis Pty. Ltd. (http://www.fontis.com.au) * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) */ ?> <?php $editorType = Mage::getStoreConfig('admin/fontis_wysiwyg/editor_type') ?> <?php if($editorType == 'tinymce') { ?> <script type="text/javascript" src="<?php echo $this->getJsUrl() ?>fontis/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> Event.observe(window, 'load', function() { var editable_areas = '<?php echo Mage::getStoreConfig('admin/fontis_wysiwyg/editable_areas') ?>'; <?php /* Remove the required-entry CSS class so Magento will allow the contents of the editor to be submitted. */ ?> editable_areas.split(',').each(function(dom_id) { if($(dom_id)) { var loopCheck = 0; while($(dom_id).hasClassName('required-entry') && loopCheck < 10) { $(dom_id).removeClassName('required-entry'); loopCheck += 1; } } }); <?php /* Add TinyMCE to any matching textareas. */ ?> tinyMCE.init({ mode : "exact", elements : editable_areas, theme : "advanced", strict_loading_mode : true, width: "640", height: "400", content_css: "<?php echo $this->getSkinUrl() ?>tinymce_content.css", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", relative_urls : false, file_browser_callback : "ajaxfilemanager" }); }); function ajaxfilemanager(field_name, url, type, win) { var ajaxfilemanagerurl = "../../../../fontis/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php"; switch (type) { case "image": break; case "media": break; case "flash": break; case "file": break; default: return false; } tinyMCE.activeEditor.windowManager.open({ url: "../../../../fontis/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php", width: 760, height: 500, inline : "yes", close_previous : "no" },{ window : win, input : field_name }); /* return false; var fileBrowserWindow = new Array(); fileBrowserWindow["file"] = ajaxfilemanagerurl; fileBrowserWindow["title"] = "Ajax File Manager"; fileBrowserWindow["width"] = "782"; fileBrowserWindow["height"] = "440"; fileBrowserWindow["close_previous"] = "no"; tinyMCE.openWindow(fileBrowserWindow, { window : win, input : field_name, resizable : "yes", inline : "yes", editor_id : tinyMCE.getWindowArg("editor_id"<a href="http://www.dowhiletrue.net/blog/rsc/smilies/icon_wink.gif" target="_blank"><img src="http://www.dowhiletrue.net/blog/rsc/smilies/icon_wink.gif" alt="<a href="http://www.dowhiletrue.net/blog/rsc/smilies/icon_wink.gif" target="_blank"><img src="http://www.dowhiletrue.net/blog/rsc/smilies/icon_wink.gif" alt=";)" class="middle" /></a>" class="middle" /></a> }); return false;*/ } </script> <?php } else if($editorType == 'fckeditor') { ?> <?php $toolbarSet = Mage::getStoreConfig('admin/fontis_wysiwyg/fckeditor_toolbarset'); ?> <script type="text/javascript" src="<?php echo $this->getJsUrl() ?>fontis/fckeditor/fckeditor.js"></script> <script type="text/javascript"> window.onload = function() { var editable_areas = '<?php echo Mage::getStoreConfig('admin/fontis_wysiwyg/editable_areas') ?>'; <?php /* Add FCKeditor to any matching textareas. */ ?> editable_areas.split(',').each(function(dom_id) { if($(dom_id)) { <?php /* Remove the required-entry CSS class so Magento will allow the contents of the editor to be submitted. */ ?> var loopCheck = 0; while($(dom_id).hasClassName('required-entry') && loopCheck < 10) { $(dom_id).removeClassName('required-entry'); loopCheck += 1; } var fck = new FCKeditor(dom_id); fck.Config["CustomConfigurationsPath"] = "<?php echo $this->getJsUrl() ?>fontis/fckeditor/custom_config.js" ; fck.BasePath = "<?php echo $this->getJsUrl() ?>fontis/fckeditor/"; fck.Width = '640'; fck.Height = '450'; <?php /* This is necessary to stop FCKeditor mangling quotes used by Magento. */ ?> /*fck.Config["ProcessHTMLEntities"] = false;*/ <?php /* Set the toolbarset. */ ?> <?php if($toolbarSet) { ?> fck.ToolbarSet = '<?php echo $toolbarSet ?>'; <?php } ?> fck.ReplaceTextarea(); } }); } </script> <?php } ?>