Call-back icon  Sales: Call 800.374.8146 (N America)|757.278.0920 (International)

Magento

Open Source eCommerce Evolved

Magento Forum

   
WYSIWYG for CMS
 
winzippy
Member
 
Avatar
Total Posts:  75
Joined:  2008-02-08
Fairport, NY, USA
 

I added my TinyMCE insert locations to the Wiki. Thanks for the question grin.

I’m guessing that the JS doesn’t see the textarea because the textarea is drawn first. If you put the JS calls in the Editor.php file as mentioned above, it will work.

Here’s what my Editor.php file looks like:

...
   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="http://www.coffeeriot.com/magento/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 : "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>'
;

                
/*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
        
{
   
...

 Signature 

Ifolo Media

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

the method you describe works just as well as when I put the code in the footer.phtml. The textarea is replaced (hidden) in the source, and the content is there, but is not being picked up by Tiny :(

I’ve implemented TinyMCE in the past on my own, and it’s usually always just worked by pointing it at the right element. This is le strange behavior indeed.

 Signature 

Sean Yeomans | visit my site

 
Magento Community Magento Community
Magento Community
Magento Community
 
winzippy
Member
 
Avatar
Total Posts:  75
Joined:  2008-02-08
Fairport, NY, USA
 

Can you post a screenshot of what’s going on?

 Signature 

Ifolo Media

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

Page 2 of the thread here, at the bottom, I posted a screen shot of the CMS Page page, which shows a text area with the TinyMCE wrapper.

it is not rendering, inside itself, the contents of the textarea it is targetting.

I can’t for some reason get my Firebug screen to ‘PrtScn’, so I’ll have to drum up some screen grabber utility to snap what I’m seeing, but essentially the page draws, and FireBug tells me there’s an error:

this.getDoc()  has no properties                                 tiny_mce.js (line 1)

and this is what firebug tells me when I right-click / Inspect Elemnt
(i cut away some of the superfluous tr’s and td’s

<textarea id="page_content" class="required-entry textarea" type="textarea" style="width: 98%; height: 600px; display: none;" title="Content" name="content"><h1>Welcome to WestCare Health Supplies online!</h1></textarea>
<
span id="mce_editor_0_parent" class="mceEditorContainer">
<
table class="mceEditor" width="98%" height="600" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<
tbody>
<
tr>
</
tr>
<
tr>
<
td align="center">
<
iframe id="mce_editor_0" class="mceEditorIframe" width="100%" height="508" frameborder="0" name="mce_editor_0" border="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" allowtransparency="true" style="width: 100%; height: 508px;">
<
html>
</
html>
</
iframe>
</
td>
</
tr>
<
tr>
</
tr>
</
tbody>
</
table>
   <
span id="mce_editor_0_resize_box" class="mceResizeBox"/>
</
span>

I was sure I’d seen someone else complaining of the same error last week but I can’t find the thread in the forums now…

maybe it would work better if I could expose my dev site publicly and have someone log into the back end and see for themselves…

 Signature 

Sean Yeomans | visit my site

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Jr. Member
 
Avatar
Total Posts:  27
Joined:  2008-02-26
Germany, Mannheim
 

Hi Sean, hi winzippy,

I have got the same problem as shawn has.

It doesn’t work at the product editing site.

I am getting a clear tinymce also. But also the “help ?” button doesn’t work either.

Any Ideas?

Hints?

 
Magento Community Magento Community
Magento Community
Magento Community
 
winzippy
Member
 
Avatar
Total Posts:  75
Joined:  2008-02-08
Fairport, NY, USA
 

Weird. I wish I had this problem so I could help. You could always try FCKEditor. It’s a better editor anyway.

 Signature 

Ifolo Media

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Jr. Member
 
Avatar
Total Posts:  27
Joined:  2008-02-26
Germany, Mannheim
 

yes i like fckeditor too. But tinymce is shipped with magento, so it should be better to use the one which comes along the product.

I found a lot of comments in the tinymce forum about that problem. This error offen appears in combination of tinymce and ajax.

 
Magento Community Magento Community
Magento Community
Magento Community
 
winzippy
Member
 
Avatar
Total Posts:  75
Joined:  2008-02-08
Fairport, NY, USA
 

Senders,

What version of Magento are you using?

 Signature 

Ifolo Media

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Jr. Member
 
Avatar
Total Posts:  27
Joined:  2008-02-26
Germany, Mannheim
 

1.0

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

Yeah I still have the problem too.
I’m wondering if there are some paths within tiny_mce that need updating.  We have to jigger the ‘src’ of the tiny_mce.js call, so maybe it breaks paths inside...? i haven’t taken the time to look, and really it shouldn’t require such a change since other people seem to not have the problem…

i hope this can be resolved. Maybe I’m missing one simple step… meanwhile, I feel like this guy:

EDIT:  Ok I installed FCKeditor instead and I’m happy.

PLUS I can upload files through it wonderfully after setting up the fckeditor config file smile

Image Attachments
animal.gif
 Signature 

Sean Yeomans | visit my site

 
Magento Community Magento Community
Magento Community
Magento Community
 
jjafuller
Jr. Member
 
Total Posts:  9
Joined:  2008-03-24
 

Note, you only need to do step 4 if you want to use the file manager in fckeditor

1. Download It: http://www.fckeditor.net/download

2. Unzip in “js” (you dont need all the files, just fckconfig.js, fckeditor.js, and editor dir)

3. Edit: lib/Varien/Data/Form/Element/Editor.php

Above the commented out tiny mce script (replace the entire “$html = line” with:

$secure = ($_SERVER['SERVER_PORT'== '443') ? true false;

            
$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="'
.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK,$secure).'../js/fckeditor/fckeditor.js"></script>
        <script language="javascript" type="text/javascript">
                Event.observe(window, "load", function(){
                var fcke = new FCKeditor("'
.$element.'") ;
                fcke.BasePath = "'
.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK,$secure).'../js/fckeditor/" ;
                fcke.Height = "600";
                fcke.Width = "450";
                fcke.ReplaceTextarea() ;
            });
        </script>'
;

4. Edit js/fckeditor/editor/filemanager/connectors/php/config.php

$Config[’Enabled’] = true ;

$Config[’UserFilesPath’] = the path you want to use for files, either absolute or relative. (i.e. /images/whatever/ or http://www.example.com/)

$Config[’UserFilesAbsolutePath’] = ‘/home/whatever/html/htdocs/whatever/nice/long/path/’ ;

[bTroubleshooting:]

1. Don’t forget trailing slashes in the config file
2. Make sure you fix any line breaks if you are copy/pasting

Known Problem

1. If making a new entry, you need to click the save in the fck controls, not the magento save

 
Magento Community Magento Community
Magento Community
Magento Community
 
winzippy
Member
 
Avatar
Total Posts:  75
Joined:  2008-02-08
Fairport, NY, USA
 

@Sean: I’m glad you like fck. The you can upload just about any file with it; like pdf’s, doc’s and the like (Under Add a Link, no less).

 Signature 

Ifolo Media

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

Note, you only need to do step 4 if you want to use the file manager in fckeditor

1. Download It: http://www.fckeditor.net/download

2. Unzip in “js” (you dont need all the files, just fckconfig.js, fckeditor.js, and editor dir)

3. Edit: lib/Varien/Data/Form/Element/Editor.php
...*snip*

hey excellent. you should add this stuff to the Wiki article:

http://www.magentocommerce.com/wiki/wysiwyg/a_how-to

 Signature 

Sean Yeomans | visit my site

 
Magento Community Magento Community
Magento Community
Magento Community
 
mayerwin
Sr. Member
 
Avatar
Total Posts:  100
Joined:  2008-01-15
France
 

Hello,

How do I do since the tiny_mce folder isn’t in the js folder? Is there an Extension key to download that package?

Thank you

 Signature 

Erwin Mayer Foundation

 
Magento Community Magento Community
Magento Community
Magento Community
 
bkimura
Jr. Member
 
Total Posts:  6
Joined:  2008-04-07
 

Hi Sean,
I tried to follow your directions provided. Im pretty sure i did all 4 steps however i still get the same html box that showed up previously. By any chance did you also do this?

<script type="text/javascript" src="path/to/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor'id_of_element_where_you_want_to_attach_fckeditor' ) ;
oFCKeditor.BasePath "path/to/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

Not quite sure why my instance is not working?

Here is the snippit of my code i added to the editor.php file:

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="'
.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK,$secure).'home/httpd/vhosts/revacomm.net/subdomains/magento/httpdocs/magento/js/fckeditor/fckeditor.js"></script>
        <script language="javascript" type="text/javascript">
                Event.observe(window, "load", function(){
                var fcke = new FCKeditor("'
.$element.'") ;
                fcke.BasePath = "'
.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK,$secure).'home/httpd/vhosts/revacomm.net/subdomains/magento/httpdocs/magento/js/fckeditor/" ;
                fcke.Height = "600";
                fcke.Width = "450";
                fcke.ReplaceTextarea() ;
            });
        </script>'
;

Do i Also need to enable the wysiwyg feature in that one file in the first page of the post?

Mahalo For your help!
Brett

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
 
Sales: Call 800.374.8146 (North America) 757.278.0920 (International)
© Copyright 2008 Varien. Magento is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
33509 users|415 users currently online|74416 forum posts