How to make TinyMCE work with Magento CMS pages

Featured Image

Latest version of Magento, as of time of this writing, is 1.3.2.3. Latest, as well as previous versions come with “half-packed” support for TinyMCE editor. There are however few bugs and few steps that need to be handled in order to enable wysiwyg editing in CMS pages. Personally I am not that big of a fan of wysiwyg editors, mostly because I am developer and like to know what I write down.

However, most of the store owners are not developers or even not that much technically savvy people (not that this is a bad thing) and they could use wysiwyg editors when adding, modifying content.

Here I will walk you trough few simple steps that will make you enable wysiwyg editing by using TinyMCE. You can see the screenshots of final result below.

TinyMCE

Step 1: Download and unpack TinyMCE to root /js folder. Two things to keep in mind here. Download regular version (not jQuery version) of TinyMCE. This is due to the fact that Magento uses Prototype, so we need to avoid conflicts. Second, watch out for unpack location. Your tiny_mce.js file should be accessible on js/tiny_mce/tiny_mce.js path.

Step 2: Open the app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php file. Locate the

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

and change it to

$fieldset->addField('content', 'editor', array(
'name'      => 'content',
'label'     => Mage::helper('cms')->__('Content'),
'title'     => Mage::helper('cms')->__('Content'),
'style'     => 'height:36em;',
'wysiwyg'   => true,
'theme' => 'advanced',
'required'  => true,
));

As you can see, here we changed on existing attribute (‘wysiwyg’) value and added new attribute ‘theme’.

Step 3: Open the /lib/Varien/Data/Form/Element/Editor.php file and locate the method getElementHtml(). Here we change

$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">
//< ![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>';

to

$_storeBaseUrl = str_replace('index.php', '', Mage::getBaseUrl());
 
//Just to test retrieved url
//echo '$_storeBaseUrl: '.$_storeBaseUrl;
 
$html = '
<textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
<script language="javascript" type="text/javascript" src="'.$_storeBaseUrl.'/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
//< ![CDATA[
Event.observe(window, "load", function() {
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>';

As you might noticed, I used $_storeBaseUrl in this other chunk of code to get the valid path to my TinyMCE javascript file. If you are using store that does not have url rewrites this is something that needs to be done because your javascript file would not be found if you go trough link like “http://store.local/index.php/js/tiny_mce/tiny_mce.js”. Then you would get TinyMCE shown on CMS page but it would be disabled.

As you can see, there were only three minor changes needed (download, modify, modify) to get the TinyMCE editor working.

Hope this helps. Cheers.


10 comments

  1. Hello,
    some time after, I found that this line is extremely dangerous :
    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]”,
    particularly for the img tag.
    In fact id is not on the list for img and this is the source of breaking the widgets code in wysiwyg mode, because widget code/decode needs id to do that correctly.
    On the other hand, the extension Pulsestorm_Tinymceconfig, that you can dowload here :
    http://alanstorm.com/2013/projects/Pulsestorm_Tinymceconfig-0.1.0.tgz
    Is the best clean way to enhanced TinyMCE.
    Be careful to put + before the tags if you want to add allowed things and not replace the preceding settings.
    Some good things about TinyMCE settings here :
    http://www.pixafy.com/blog/2013/01/overcoming-magentos-built-in-wysiwyg-editor/
    Hope this will help.

  2. How to static content load on the wysiwyg editor at time of edit action in the controllers?

  3. I wonder how to set TinyMCS to prevent formatting all things. Even when I try to add embed video with responsive code with inline css, tinyMCS after edit change it to pure iframe and I lost whole responsive css from it. Any hints ?
    I know that it can TinyMCS cleanup – could be totally disabled – but this is not a good option. Any hints – how to prevent TinyMCS from “improving” embed code with inline css. Thanks for help

  4. I wonder what would be the best way to change tinymce settings in Magento 1.4 – yes i know i can edit core js file, but i guess that this should NOT be the right way

  5. I tried to get this working on a 1.3.2.4 install and the editor appears but none of the buttons work and I cant view any content in the textarea.

  6. Magento WYSIWYG extension sometimes messes up when having {{ }}
    and removes the last }}. The {{}} are needed for loading Magento variables, Magento store URL ….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.