WYSIWYG Editor: A How-to

Last modified by nabuhonodozor on Fri, June 25, 2010 10:32
Source|Old Revisions  

This is an old revision of the document!


As of version 1.0 there is still no WYSIWYG functionality turned on by default in Magento. WYSIWYG editors are a convenient way to add content to products, content pages, and categories. WYSIWYGs also have the added advantage of being more human-readable.

That being said, there is a WYSIWYG editor installed with Magento: TinyMCE, developed by MoxieCode. If you’re not a big fan of TinyMCE or just wantt to try something new, you can also easily install and run FCKeditor.


Since all the files are already there, TinyMCE is a snap to get up and running. The only drawback is that TinyMCE doesn’t work for Category descrtiption fields.

Getting it working

Insert this code into the pages containing the textarea elements you wish to attach the WYSIWYG to. Make sure the path to the .js file is correct as well as the elements used in the tinyMCE init function.

Where to insert it
  • For products, add the code around line 54 of app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml.
  • For the CMS add the code at around line 52 of lib/Varien/Data/Form/Element/Editor.php, inside the $html variable and after the the <textarea> tag.
<script language="javascript" type="text/javascript" src="path/to/magento/js/tiny_mce/tiny_mce.js"></script>
                <script language="javascript" type="text/javascript">
                        mode : "exact",
                        theme : "advanced",
                        elements : "element1,element2,element3,etc.",
                        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">',

When you get it working, TinyMCE should look like this:  TinyMCE in action


Where to get it

You can download FCKEditor from the FCKeditor website

How to install it

You can unzip the fckeditor folder wherever you like, however the best places for it are your Magento install’s root or inside the js folder.

Getting it working

To call FCKeditor on any page, insert the following code.

<script type="text/javascript" src="path/to/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
var oFCKeditor = new FCKeditor( 'id_of_element_where_you_want_to_attach_fckeditor' ) ;
oFCKeditor.BasePath = "path/to/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;

This is what FCKeditor looks like on the category page without any customization:  FCKeditor in action

Getting it working with CMS pages

Go in /app/code/core/Mage/Adminhtml/Block/CMS/Page/Edit/Tab/Main.php and modify

        $fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'width: 98%; height: 600px;',
            'wysiwyg'   => false,
            'required'  => true,


        $fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'width: 98%; height: 600px;',
            'wysiwyg'   => true,
            'required'  => true,

Go in /lib/Varien/Data/Form/Element/Editor.php and replace $html = ‘...’; by

            $html = '<textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
               <script type="text/javascript" src="/js/fckeditor/fckeditor.js"></script>
               <script type="text/javascript">
                   window.onload = function() {
                       var oFCKeditor = new FCKeditor( "' . $element .'" ) ;
                       oFCKeditor.BasePath = "/js/fckeditor/" ;
                       oFCKeditor.ReplaceTextarea() ;

Make it BIGGER

For magento 1.0 release for WYSIWYG on CMS, replace in skin/adminhtml/default/default/boxes.css:

columns .form-list td.value             { width:auto; padding-right:5px; }


/* @hack FCKEditor */
.columns .form-list td.value             { width:270px; padding-right:5px; }
#page_tabs_main_section_content  td.value  { width:100%; padding-right:5px; }

You can optionally replace in /js/fckeditor/fckeditor.js :

    this.Height            = height        || '200' ;


    this.Height            = height        || '600' ;

For earlier releases:

Add the following code in skin/adminhtml/default/default/boxes.css:

width: 550px;
height: 600px;

Additional Tips and Tricks

Use fckEdit to upload images

1. Create directory to store uploaded files. I’ve created one under media/upload

2. ChMod newly created dir to 777

3. Edit connector files under /js/fckeditor/editor/filemanager/connectors/php/config.php


$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/media/upload/' ;

Description apply to Apache/PHP installation. For Windows/other look at others catalogues to find proper connector.

Unable to create new product/category/cms page?

I had a problem when creating new products, categories, and cms pages. Magento wouldn’t recognize the information enterted into FCK’s editing field. To get around this I added the following javascript, which injects some text into the textarea prior to being converted to FCKEditor.

if(document.getElementById('description').value == ''){
            document.getElementById('description').value = "<p>Enter description</p>";