How to use Wysiwyg editor in magento2

May 21, 2013   //   by kdecom   //   magento, magento-extension, magento2, magento2-tutorial  //  1 Comment

How to use Wysiwyg editor in magento2

I was having trouble when i was developing my magento2 blog extension because i get stuck at the point when i need to use wysiwyg editor for magento2. It is little bit different then magento1 i guess.

Before we start i hope you all knows how to do magento2 grid with form. If you are not sure read this blog How to create a Magento2 Admin Grid

To make it work what i did is:-

Step1:-

Open your layout file. In my case it is located here:

Kdecom/Blog/view/adminhtml/layout.xml

 

<adminhtml_blog_blog_edit>
        <update handle="editor"/>
        <reference name="content">
            <block type="Kdecom_Blog_Block_Adminhtml_Blog_Edit"  name="blog.post.edit" />
        </reference>
</adminhtml_blog_blog_edit>

<update handle=”editor”/> tag included all necessary Java Script file related to Wysiwyg editor.

Only for reference. Do not add the below line in your xml.

If you want to know which file gets included in magneto admin. Here is the list ()

<editor>
        <reference name="head">
            <action method="setCanLoadExtJs"><flag>1</flag></action>
            <action method="addJs"><file>Mage_Adminhtml::variables.js</file></action>
            <action method="addJs"><file>mage/adminhtml/wysiwyg/widget.js</file></action>
            <action method="addJs"><file>lib/flex.js</file></action>
            <action method="addJs"><file>lib/FABridge.js</file></action>
            <action method="addJs"><file>mage/adminhtml/flexuploader.js</file></action>
            <action method="addJs"><file>mage/adminhtml/browser.js</file></action>
            <action method="addJs"><file>prototype/window.js</file></action>
            <action method="addCss"><file>prototype/windows/themes/default.css</file></action>
            <action method="addCss"><file>Mage_Core::prototype/magento.css</file></action>
        </reference>
    </editor>

Open your form.php file . In my case location of the file was:-

Kdecom/Blog/Block/Adminhtml/Blog/Edit/Form.php

Add this method.

protected function _prepareLayout() {
        parent::_prepareLayout();
        if (Mage::getSingleton('Mage_Cms_Model_Wysiwyg_Config')->isEnabled()) {
            $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
        }
    }

Here is the code to add the element

$fieldset->addField(
                'post_content', 'editor', array(
            'label' => $this->__('Post Content'),
            'class' => 'required-entry',
            'style' => 'width:725px;height:460px',
            'required' => true,
            'force_load' => true,
            'config' => Mage::getSingleton('Mage_Cms_Model_Wysiwyg_Config')->getConfig($config)
                )
        );

As a Zend Framework developer i was thinking it why magento using Editor as an element but not the TextArea so just in that case i would like to say magento has list of the Element that you can use in your form.

Here is the list of the magento element that you can use in your magento form.

  • Button
  • Checkbox
  • Checkbboxes
  • Collection
  • Column
  • Date
  • EditableMultiSelect
  • Editor
  • Fieldset
  • File
  • Gallery
  • Hidden
  • Image
  • ImageFile
  • Label
  • Link
  • Multiline
  • MultiSelect
  • Note
  • Obscure (not sure what is it)?
  • Password
  • Radio
  • Radios
  • Reset
  • Select
  • Submit
  • Text
  • Textarea
  • Time

I hope that helps.

1 Comment

  • Wow! This could be a definite of the very useful sites We’ve ever before arrive throughout for this subject. Essentially Spectacular. I’m also a professional with this subject matter in order to understand your energy.

Leave a comment

css.php