Magento Forum

   
Page 1 of 12
WYSIWYG for CMS
 
petemcw
Jr. Member
 
Total Posts:  24
Joined:  2007-08-31
 

Just wondering if anyone has looking into putting a WYSIWYG editor in the CMS area of Magento?  My guess is that it wouldn’t be difficult and I know a lot of our clients will almost demand it.  We normally use something like ”XStandard” or ”TinyMCE”.

Mainly curious at this point, but if you’ve tried it let me know how the experience went!  Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Magento Team
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

This should be available in upcoming releases.

 
Magento Community Magento Community
Magento Community
Magento Community
 
austinstorm
Member
 
Avatar
Total Posts:  31
Joined:  2007-08-31
Moscow, ID
 

An option to turn it off, once it exists, would also be appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

You can change the setting to use the WYSIWYG editor in the CMS section by changing the following code:

app\code\core\Mage\Adminhtml\Block\Cms\Page\Edit\Tab\Main.php

Change:

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

to

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

By default this will give you a simple WYSIWYG editor. To use the advanced editor you need to change the following:

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

$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="'
.$this->getForm()->getBaseUrl().'js/tiny_mce/tiny_mce.js"></script>
                <script language="javascript" type="text/javascript">
                    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 : "true",
                        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

$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="'
.$this->getForm()->getBaseUrl().'js/tiny_mce/tiny_mce.js"></script>
                <script language="javascript" type="text/javascript">
                    tinyMCE.init({
                        mode : "exact",
                        theme : "advanced",
                        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 : "true",
                        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>'
;

 
Magento Community Magento Community
Magento Community
Magento Community
 
matt adams
Jr. Member
 
Avatar
Total Posts:  15
Joined:  2007-09-06
 

very cool! Thanks for this fix. it worked great and was just what I needed.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

Another solution without changing templates would be to add ‘theme’ parameter in app\code\core\Mage\Adminhtml\Block\Cms\Page\Edit\Tab\Main.php:

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
[db] DigitalBlueprint
Member
 
Avatar
Total Posts:  37
Joined:  2007-10-11
Eastbourne, UK
 

I really need a wysiwyg editor available in the product description field as the products in the store i’m working on at the moment are being entered by some data entry staff who know nothing of HTML and will quickly end up breaking things when asked to put in feature lists etc. Is there a similar switch that can be applied for this area of the admin?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Buddha993
Member
 
Total Posts:  35
Joined:  2007-08-31
 
-

DigitalBlueprint” date="1192756858"]I really need a wysiwyg editor available in the product description field as the products in the store i’m working on at the moment are being entered by some data entry staff who know nothing of HTML and will quickly end up breaking things when asked to put in feature lists etc. Is there a similar switch that can be applied for this area of the admin?

I’m also interested in that.
Any Solution?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

I’ve had a quick look at doing this and I think you need to start looking in the eav_attribute table for the field names and then modifying the records.
I’ve not had a chance to try anything in particular but hopefully this will help you.

Cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
paulmorrison
Jr. Member
 
Total Posts:  11
Joined:  2007-11-21
 

The advanced editor doesn’t seem to be working properly in IE7, nothing at all appears in the Textarea.

In Firefox 2 the html editor popup does nothing.

Update: I was getting an error with tinyMCE relating to
http://www.mozilla.org/projects/security/components/same-origin.html

II just added document.domain = “my.domain.com” into tiny_mce_popup.js in the inti funtion and it seems to work.

 
Magento Community Magento Community
Magento Community
Magento Community
 
seldon
Sr. Member
 
Total Posts:  92
Joined:  2007-11-08
 

Hmm, I would prefer the ext editor to Tiny MCE, is that possible?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Greenhorn2013
Jr. Member
 
Total Posts:  13
Joined:  2007-11-29
 

OK it works with CMS Pages, but what about Product Description, Short Description and other Custom Generated Textareas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
ortsaipekim
Jr. Member
 
Total Posts:  18
Joined:  2007-11-07
 

Two questions:

1. Will there be a fckeditor option available in future releases? My experience with tinymce in wordpress is that it strips certain html tags, where fckeditor does not.
2. Will wysiwyg be added to the various product textareas as people are asking, or just in the CMS?

I might do some extending of default functionality based on the answers to these. Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mysterion
Jr. Member
 
Avatar
Total Posts:  4
Joined:  2008-01-31
 

None of the solutions above are working for me on Magento ver. 0.7.15480 (Jan 31 08). Is there some form of enable/disable option I’m missing in the admin perhaps? Any one able to enable wyswyg on this build? Many thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
iblastoff
Sr. Member
 
Total Posts:  252
Joined:  2007-08-31
 

this is for the latest version of magento (0.8.16100)

since the backend now incorporates /index.php as part of the url (presumably because a lot of ppl were having url issues), it also screws up the url for tiny_mce.js (now it reads as http://www.yoursite.com/index.php/js/tiny_mce/tiny_mce.js which is wrong)

open up /lib/Varien/Data/Form/Element/Editor.php and at around line 52, where it has the following:

<script language="javascript" type="text/javascript" src="'.$this->getForm()->getBaseUrl().'js/tiny_mce/tiny_mce.js"></script>

just change it to the path of your magento installation. for example this works for me:

<script language="javascript" type="text/javascript" src="/'js/tiny_mce/tiny_mce.js"></script>

then do the change moshe mentions in his post above and now you have tiny_mce for your cms pages (personally i don’t see how this is useful here but meh)

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 12