Magento

This tutorial gives detailed steps on adding the TinyMCE - JavaScript WYSYWYG Editor to Magento. When complete, the editor will be available in the Magento administrative interface. It affects the following HTML textarea input fields in the Magento interface:

• Product Description
• Product Short Description
• CMS Page Content
• CMS Static Block Content

A large part of the code is based off of the original written by “Web Master”, and the many contributions posted in the Message Board. I want to give credit to all of those people involved. Thank you to “jimfraseruk” for offering the setTimeout() function in lib/Varien/Data/Form/Element/Editor.php on the Message Board. This seemed to fix the bug in which the TinyMCE would appear, but no text could be entered into the field.

I’ve decided to create a new WYSIWYG wiki instead of updating the existing one. This approach is different, as it makes use of the app/code/local and custom theme directories to avoid changing the Magento core code. The only exception is the lib/Varien/Data/Form/Element/Editor.php file.

This method also avoids a few bad practices that were previously used as workarounds in the Message Board. These include using the fully qualified domain to reference the tiny_mce.js file, and calling the tiny_mce.js file from within several different template files.

This method is implemented in Version 1.2.02. It should be easy enough to follow to implement in newer versions. I will update the Wiki when I upgrade my sites to 1.3.

The tutorial assumes you are already familiar with the concept of adding custom modules to Magento using the app/code/local directory. If you haven’t already, please review the wiki titled “Changing and Customizing Magento Code” located at http://www.magentocommerce.com/wiki/groups/174/changing_and_customizing_magento_code.

In this example, we will use MyCompany as the class name for the custom modules. We will use myadmintheme as the name of the adminhtml theme.

You will be replacing the following strings from my article with your own:

• myadmintheme → The name of your custom adminhtml theme
• MyCompany → The namespace for your custom modules

Create the following theme directories:

app/design/adminhtml/default/myadmintheme
skin/adminhtml/default/myadmintheme

Create the following directories:

app/code/local/MyCompany
app/code/local/MyCompany/Adminhtml
app/code/local/MyCompany/Adminhtml/etc
app/etc/modules

Create the following file:

app/code/local/MyCompany/Adminhtml/etc/config.xml

The contents of this file are as follows:

<?xml version="1.0"?>
<config>
  <stores>
      <admin>
          <design>
              <package>
                  <name>default</name>
              </package>
              <theme>
                  <default>myadmintheme</default>
              </theme>
          </design>
      </admin>
  </stores>
  <modules>
    <MyCompany_Adminhtml>
      <version>0.1.0</version>
    </MyCompany_Adminhtml>
  </modules>
</config>

Create the following file:

app/etc/modules/MyCompany_Adminhtml.xml

File contents are as follows:

<?xml version="1.0"?>
<config>
  <modules>
    <MyCompany_Adminhtml>
      <active>true</active>
      <codePool>local</codePool>
    </MyCompany_Adminhtml>
  </modules>
</config>

At this point, you could clear your cache files and reload your admin interface. Your site should now be using your myadminhtml theme for the admin interface. You can customize it as you wish and test it, but theming the adminhtml is beyond the scope of this tutorial.

1. Download the latest version of tiny_mce from http://tinymce.moxiecode.com/
2. Once you have downloaded tinymce_x_x_x_x.zip, extract the files somewhere locally.
3. You can now move the tinymce/jscripts/tiny_mce folder to the js/ directory on your server.

( Note: It is up to you, but I choose to place tiny_mce elsewhere, and then place a symlink to the directory in the sites’ js folder. That is also beyond the scope of this tutorial. )

Make the following directories:

app/design/adminhtml/default/myadmintheme/template
app/design/adminhtml/default/myadmintheme/template/page
app/design/adminhtml/default/myadmintheme/template/catalog
app/design/adminhtml/default/myadmintheme/template/catalog/product

Copy the following files: ( from → to )

app/design/adminhtml/default/default/template/page.phtml -> app/design/adminhtml/default/myadmintheme/template/page.phtml
app/design/adminhtml/default/default/template/page/head.phtml -> app/design/adminhtml/default/myadmintheme/template/page/head.phtml
app/design/adminhtml/default/default/template/catalog/product/edit.phtml -> app/design/adminhtml/default/myadmintheme/template/catalog/product/edit.phtml

Make the following directories:

app/code/local/MyCompany/Adminhtml/Block
app/code/local/MyCompany/Adminhtml/Block/Cms
app/code/local/MyCompany/Adminhtml/Block/Cms/Block
app/code/local/MyCompany/Adminhtml/Block/Cms/Block/Edit
app/code/local/MyCompany/Adminhtml/Block/Cms/Page
app/code/local/MyCompany/Adminhtml/Block/Cms/Page/Edit
app/code/local/MyCompany/Adminhtml/Block/Cms/Page/Edit/Tab

Copy the following files: ( from → to )

app/code/core/Mage/Adminhtml/Block/Cms/Block/Edit/Form.php -> app/code/local/MyCompany/Adminhtml/Block/Cms/Block/Edit/Form.php
app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php -> app/code/local/MyCompany/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php

This step will tell Magento to override the existing app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.phtml and app/code/core/Mage/Adminhtml/Block/Cms/Block/Edit/Form.phtml files with the files from your app/code/local directory.

Edit the following file:

app/code/local/MyCompany/Adminhtml/etc/config.xml

Just before the closing </config> tag, add the following code:

<global>
  <blocks>
    <adminhtml>
      <rewrite>
        <cms_page_edit_tab_main>MyCompany_Adminhtml_Block_Cms_Page_Edit_Tab_Main</cms_page_edit_tab_main>
      </rewrite>
      <rewrite>
        <cms_block_edit_form>MyCompany_Adminhtml_Block_Cms_Block_Edit_Form</cms_block_edit_form>
      </rewrite>
    </adminhtml>
  </blocks>
</global>

The resulting file should look like this:

<?xml version="1.0"?>
<config>
  <stores>
      <admin>
          <!-- default admin design package and theme -->
          <design>
              <package>
                  <name>default</name>
              </package>
              <theme>
                  <default>myadmintheme</default>
              </theme>
          </design>
      </admin>
  </stores>
  <modules>
    <MyCompany_Adminhtml>
      <version>0.1.0</version>
    </MyCompany_Adminhtml>
  </modules>
  <global>
    <blocks>
      <adminhtml>
        <rewrite>
          <cms_page_edit_tab_main>MyCompany_Adminhtml_Block_Cms_Page_Edit_Tab_Main</cms_page_edit_tab_main>
        </rewrite>
        <rewrite>
          <cms_block_edit_form>MyCompany_Adminhtml_Block_Cms_Block_Edit_Form</cms_block_edit_form>
        </rewrite>
      </adminhtml>
    </blocks>
  </global>
</config>

Edit the following file:

app/code/local/MyCompany/Adminhtml/Block/Cms/Block/Edit/Form.php

1. On the line that reads

class Mage_Adminhtml_Block_Cms_Block_Edit_Form extends Mage_Adminhtml_Block

Change

Mage_Adminhtml_Block_Cms_Block_Edit_Form

to

MyCompany_Adminhtml_Block_Cms_Block_Edit_Form

Resulting in the following:

class MyCompany_Adminhtml_Block_Cms_Block_Edit_Form extends Mage_Adminhtml_Block

2. On the line that reads “‘wysiwyg’ ⇒ false,“, change false to true.

Change

'wysiwyg'   => true,

to

'wysiwyg'   => false,

Edit the following file:

app/code/local/MyCompany/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php

1. On the line that reads

class Mage_Adminhtml_Block_Cms_Page_Edit_Tab_Main extends Mage_Adminhtml_Block_Widget_Form

Change

Mage_Adminhtml_Block_Cms_Page_Edit_Tab_Main

to

MyCompany_Adminhtml_Block_Cms_Page_Edit_Tab_Main

Resulting in the following:

class MyCompany_Adminhtml_Block_Cms_Page_Edit_Tab_Main extends Mage_Adminhtml_Block_Widget_Form

2. On the line that reads “‘wysiwyg’ ⇒ false,“, change false to true.

Change

'wysiwyg'   => true,

to

'wysiwyg'   => false,

1. Edit the following file:

app/design/adminhtml/default/myadmintheme/template/page.phtml

After the line that reads

<?php echo $this->getChildHtml('head') ?>

Add the following code:

<script type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tiny_mce.js') ?>" language="javascript"></script>

2. Edit the following file:

app/design/adminhtml/default/myadmintheme/template/page/head.phtml

Just before the line that reads

<?php echo $this->helper('core/js')->getTranslatorScript() ?>

Add the following code:

<script language="javascript" type="text/javascript">
  window.onload = function() {
    if(document.getElementById('page_content')){
      if(document.getElementById('page_content').value == ''){
      document.getElementById('page_content').value = "<p>Page Content</p>";
    }
  }
}

3. Edit the following file:

app/design/adminhtml/default/myadmintheme/template/catalog/product/edit.phtml

After the line that reads

//<![CDATA[

Add the following code:

Event.observe(window, 'load', function() {
  if(document.getElementById('description')){
    if(document.getElementById('description').value == ''){
      document.getElementById('description').value = "<p>Enter description</p>";
      document.getElementById('short_description').value = "<p>Enter short description</p>";
    }
  }
  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|onmo
      theme_advanced_resize_horizontal : "true",
      theme_advanced_resizing : "true",
      apply_source_formatting : "true",
      convert_urls : "false",
      force_br_newlines : "true",
      doctype : '&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;'
  });
});

Important! This is the only Magento distribution file that must be changed. I have not figured out how to override this file. Please back up the original file and be sure copy the changes before an upgrade so they may be reimplemented.

Edit the following file:

lib/Varien/Data/Form/Element/Editor.php

1. After the line that reads

//<![CDATA[

Add the following line:

setTimeout(function(){

2. Change the following line:

/* tinyMCE.init({

to

tinyMCE.init({

In other words, remove the “/* “.

3. Change the following line:

theme : "'.$this->getTheme().'",

to

theme : "advanced",

4. Directly after the line in above step, add the following line:

strict_loading_mode : "true",

5. Change the line reading

});*/

to

});

In other words, remove the “*/”

6. Directly after the line in the above step, add the following line:

},1000)

The result should look like this

//<![CDATA[
setTimeout(function(){
   tinyMCE.init({
       mode : "exact",
       theme : "advanced",
       strict_loading_mode : "true",
       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|onmouse
       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">'
   });
},1000)
//]]>

Be sure to remove your cache files and refresh the pages in your browser to load the javascript files.