Call-back icon  Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento

eCommerce Software for Online Growth

Magento Forum

   
WYSIWYG for CMS
 
noru
Jr. Member
 
Total Posts:  8
Joined:  2008-07-28
 

I read trough the entire topic. Finally , after setting up strict_loading_mode : “true”, the TinyMCE editor works, but I can save the CMS Page because of the ‘Required Field ‘ error mentioned above. I am using ver 1.0.19870.4.
By the end of the day I’ll try to folow the wiki on howto setup Magento with FCK.

 
Magento Community Magento Community
Magento Community
Magento Community
 
andreladocruz
Sr. Member
 
Total Posts:  193
Joined:  2008-05-07
Brazil
 

I create an step-by-step tutorial to my client on how to use google pages to generate the HTML code and put it magento backoffice.

Maybe magento´s team put another chalenger to do on this way too (LOL).

I forgot about it by know…

 Signature 

André Cruz
http://farmadelivery.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
Habeeb
Jr. Member
 
Total Posts:  3
Joined:  2008-06-30
 

My meganto version is 1.1.3. I’ve tried to integrate TinyMCE in product page as described in wiki. But It’s not working. I’m not getting any error message in Firefox (but tinyMCE not working). In IE, the page is not loading, error message is ‘tinyMCE undefined’.

Appreciate your help.

Thanks
Habeeb

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tomislav Bilic
Member
 
Avatar
Total Posts:  50
Joined:  2007-11-17
Osijek, Croatia
 

Very frustrating indeed. Why did Varien disabled switching it on? Does it interfere with some existing Javascript library?

 Signature 

Owner of Inchoo Ltd., partner of Surgeworks

 
Magento Community Magento Community
Magento Community
Magento Community
 
Habeeb
Jr. Member
 
Total Posts:  3
Joined:  2008-06-30
 

So Verien intentionally disabled it or is it my error??

 
Magento Community Magento Community
Magento Community
Magento Community
 
abelcreative
Jr. Member
 
Total Posts:  6
Joined:  2007-08-31
 

same problem here - got magento 1.1.3 running, tinyMCE will NOT work, I followed the very simple instructions on the wiki and all I got was half-blank CMS pages

 
Magento Community Magento Community
Magento Community
Magento Community
 
o0avb0o
Jr. Member
 
Total Posts:  16
Joined:  2008-05-23
 

I’m using magento 1.1.3. tinymce is working for the cms pages but doesn’t load on the product edit pages. how to fix that?

 
Magento Community Magento Community
Magento Community
Magento Community
 
firespire
Jr. Member
 
Total Posts:  27
Joined:  2008-02-24
Cape Town, South Africa
 

hello everyone,

hope all you gals and girls are doing super!
it would seem i got tinymce to work great with magento - by that i mean that it is implemented and showing up/saving pages. i am running magento latest stable 1.1.3 on linux. i still gotto dive into the wissy css and place everything nicely so the wissy display perfect

here is what i have done.

thank you firstly for the wissy located at: http://www.magentocommerce.com/wiki/wysiwyg/a_how-to
this helped me a great deal.

i downloaded the latest tinymce source and extracted the tiny_mce directory to my js folder.
my paths are therefore the same as in the howto

i then edited /app/design/adminhtml/default/default/template/catalog/product/edit.phtml
and added the following code at starting at line 49

<script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tiny_mce.js') ?>"></script>
<script language="javascript" type="text/javascript">
Event.observe(window'load', function() {
    tinyMCE
.init({
        mode 
"exact",
        
theme "advanced",
        
strict_loading_mode true
        
elements "description,short_description,in_depth",
        
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 "true",
        
theme_advanced_resizing "true",
        
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>

then i edited /lib/Varien/Data/Form/Element/Editor.php
and added the following code starting at line 46 replacing the entire public function getElementHtml() function with this code
NOTE: i removed the if and else statement

public function getElementHtml()
    
{
        
/*if( $this->getWysiwyg() === true )*/
        
{
            $element 
= ($this->getState() == 'html') ? '' $this->getHtmlId();

            
$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="/js/tiny_mce/tiny_mce.js"></script>
        <script language="javascript" type="text/javascript">
                Event.observe(window, \'
load\', function() {
            tinyMCE.init({
                mode : "exact",
                theme : "advanced",
                strict_loading_mode : true,
                elements : "'
.$this->getHtmlId().'",
                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 : "true",
                theme_advanced_resizing : "true",
                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>'
;

            
$html.= $this->getAfterElementHtml();
            return 
$html;
        
}
        
/*
        else
        {
            return parent::getElementHtml();
        }*/
    
}

then i edited /app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php
and close to the bottom i changed this
NOTE: i changed the ‘required’ => true, to ‘required’ => false,

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

to this

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

then i edited /app/design/adminhtml/default/default/template/page.phtml
and added the following code in the head section

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

and voillah! working smile

i hope this works for you, if not post and let’s roll it
take care,

Win

 
Magento Community Magento Community
Magento Community
Magento Community
 
redwagon
Jr. Member
 
Total Posts:  17
Joined:  2008-07-02
MN, USA
 

Thanks! Got it to work with the editor.php posted from the guy before you.
BUT! TinyMCE messes up blocks when I hit save. I have a custom featured block and bestseller block. So when I hit save it make then go blank on the front end. Anybody else having this problem? Fixes?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
budape
Jr. Member
 
Total Posts:  4
Joined:  2008-08-18
 
firespire - 21 August 2008 02:14 PM

i downloaded the latest tinymce source and extracted the tiny_mce directory to my js folder.

thanks firespire. upgrading to tinymce 3.1.1 did the trick. the wysiwyg now works on cms and product pages.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joyously
Guru
 
Total Posts:  350
Joined:  2008-08-21
 

On 1.1.3 I got tinymce to work using the description in the wiki.  I only did it for the CMS pages. It worked fine, even saving, except that I can not create a new CMS page. If I take tiny out again, creating a new CMS page works again.  Maybe I’ll create all the ones I need, then install tinymce again so the shop owner can edit the pages.

I didn’t even bother to put tinymce on the product pages since there’s no telling how messy the pages will look when I give that power to non-web-savvy salespeople.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jimfraseruk
Jr. Member
 
Total Posts:  2
Joined:  2008-08-22
 

Hello

Here are some of the things I noticed when trying (and now succeding) in getting this going that may help you not fall into the same holes as I did). Point four was the big one for me.

1) Blank page. (below the header where your logo etc are). This was usually due to an the code I had copied and pasted from this site not working for my setup. I used the Firefox error console (Tools-Error Console) to locate the problem (even though I rarely knew what the solution was). I could not use exactly the same code as the Wiki but a combination of many other peoples suggestions and even some of the FCK code is working now.

2) TinyMCE not showing. I had made all the changes to the code outlined by the forum but the page looked just the same with no TinyMCE showing. This was due to the path to TinyMCE outlined in many of these forum entries not working for me. I had to fully qualify the path. http://<my.domain>/magento/js/Tiny_MCE/Tiny_MCE.js

3) Cannot type in the TinyMCE editor. (Only on new products or CMS pages, i could edit and save existing pages fine). Not sure why but if I clicked on the HTML button and typed something and clicked update it worked. Then then came the next problem when i tried to save:-

4) This item is required. When I tried to save a NEW CMS page or product page it said that the page_content, description and short_description fields were required even though i had loads of text in them. This issue and issue (3) were solved by using some code from the FCK wiki section. This pre populates the text areas with text before TinyMCE loads (Method two of the not changing core code section but without the FCK bit).

so here are my working files

To kick it all off and change the core code
/magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php

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

For the product pages change add this code after the </form> line before the rest of the jscript.
app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml

<script language="javascript" type="text/javascript" src="http://<yourdomin>/magento/js/tiny_mce/tiny_mce.js"></script>
                
<script language="javascript" type="text/javascript">

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|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                        
theme_advanced_resize_horizontal "true",
                        
theme_advanced_resizing "true",
                        
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>

remember to change the path to TinyMCE to your location (fully qualified). This includes the code to pre populate the text areas to make TinyMCE work for new pages and get rid of the ‘Required Field’ error.

continued on next page

 
Magento Community Magento Community
Magento Community
Magento Community
 
jimfraseruk
Jr. Member
 
Total Posts:  2
Joined:  2008-08-22
 

Part two

CMS pages.
Replace the whole finction. I had to use the timeout function in this code rather than the window load used in the code above. I also could not figure out how to pre populate the page_content text area from this file so we have to change another one after this to make it work.

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

public function getElementHtml()
    
{
        
if( $this->getWysiwyg() === true )
        
{
            $element 
= ($this->getState() == 'html') ? '' $this->getHtmlId();

            
$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="<yourdomian>/magento/js/tiny_mce/tiny_mce.js"></script>
            <script language="javascript" type="text/javascript">
        setTimeout(function(){  
                   tinyMCE.init({
                        mode : "exact",
                        theme : "advanced",
                strict_loading_mode : true, 
            elements : "'
.$this->getHtmlId().'",
                        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 : "true",
                        theme_advanced_resizing : "true",
                        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);
                </script>'
;

                
/*plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
                theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking"*/

            
$html.= $this->getAfterElementHtml();
            return 
$html;
        
}
        
else
        
{
            
return parent::getElementHtml();
        
}
    }

remember to change the path to TinyMCE (replace <yourdomain> with your domin) fully qualified. I also don’t think you need to the ‘$element = ....’ line but for now its fine. To pre populate the page_content text area and allow editing and saving change this last file after the first </script> tag:-

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

<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>Enter CMS content</p>"
        
}
    }
}
</script>

Hope this helps you. I have yet to use the editor extensively as I am not capturing content yet so there may be other issues.

I am using PHP 5.2.1 Magento 1.1.2 and apache 2.0.x

 
Magento Community Magento Community
Magento Community
Magento Community
 
redwagon
Jr. Member
 
Total Posts:  17
Joined:  2008-07-02
MN, USA
 

Thanks Jim! It works perfectly. It even solved my problem with the custom blocks on the homepage. Downloading the latest TinyMCE was necessary, for those that are reading this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jbova
Jr. Member
 
Total Posts:  6
Joined:  2008-07-17
 

Thanks Jim! This worked perfectly for me as well. I also had to download the latest version of tiny_mce. Be sure to remove your var/cache and clear your browsers cache.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
 
Sales: Call 877.832.5289 (North America) 310.295.4144 (International)