Adding the WYSIWYG editor to an extension
02 Apr 2015, by Matthew Gamble
0 Comments · Posted in Magento

    While developing the new Fontis Blog extension, we wanted to allow use of the same WYSIWYG editor tools that users have when creating Magento CMS pages or static blocks. Doing so is not very difficult, requiring only a few changes to add the Magento WYSIWYG to your own extensions.

    The first step is tell Magento that it can load the TinyMCE WYSIWYG JavaScript file. This should be done in the layout, in the handle used for your page, like so:

    <reference name="head">
        <action method="setCanLoadTinyMce"><flag>1</flag></action>

    The second step is to set a couple of attributes for each field on your page that you wish to have the WYSIWYG editor. For each field that you have on your page, you'll have a call to $fieldset->addField() with a few configuration options. Most fields will have the "name", "label", "title", "style" and "required" options set. To enable the WYSIWYG editor for a specific field, you'll need to add the following two options:

    • wysiwyg — set this to true
    • config — make a call to Mage::getSingleton("cms/wysiwyg_config")->getConfig() and assign the result to this

    This will be enough to get the WYSIWYG editor working, but there are still some additional steps required to get it working as you'd expect.

    When you make the call to Mage::getSingleton("cms/wysiwyg_config")->getConfig(), you can specify a few defaults. To do so, you create an array with these defaults and pass it as a parameter to getConfig(), like so:

        "add_variables" => true,
        "add_widgets"   => true,
        "add_images"    => true,

    These settings control the visibility of the "Add Variables", "Add Widgets" and "Add Images" buttons when the WYSIWYG editor is hidden. It is also worth noting that if the WYSIWYG editor is disabled completely, the "Add Images" button will not show up even if set to true unless either add_variables or add_widgets (or both) are set to true.

    Next, in order for the Magento WYSIWYG image gallery to actually appear, you need to add <update handle="editor"/> to the relevant layout XML. For example:

        <update handle="editor"/>

    This tells Magento to load in further JavaScript which enables the use of the gallery. You'll need to ensure this is in place for all controller actions, such as for separate edit and add actions.

    Lastly, don't forget to put the text the user entered through Magento's CMS processor before the text is output to the browser. This ensures the CMS tags inserted by the WYSIWYG editor are parsed and replaced by actual markup. This is done with a call to the following function:

    $processedContent = Mage::helper("cms")->getPageTemplateProcessor()->filter($unprocessedContent);

    Following the above process should allow your extension to provide admins with the familiar Magento WYSIWYG editor on a text field of your choosing, making it easy for them to manage rich content on their site.