Magento

This is an old revision of the document!

My Success: v1.1.3 (valid for: 1.1.2, 1.1.3, 1.1.4) Warning: I / nor any part of Magento is responsible for anything you choose to download/custom modifications... now that thats covered! I’ve been requested to add more info... Note* I use SSH + *nix + FF3.0

Note: added by Firespire Thursday, October 23 2008 This Wiki syntax is messed up! I tried to use this code but the wiki have replaced thing beyond my repair...I suggest either fixing the code or giving users a syntax ledgend.

Note: wiki is stripping out escaped single-quotes. If you edit this page be sure to add back double backslashes before single-quotes.

Installing Tiny MCE 1. downloaded tiny_mce,

 http://prdownloads.sourceforge.net/tinymce/tinymce_3_1_1.zip?download

-unzip it, and change directory to : tinymce/jscripts/ -tarball and transfer the file to your server

tar -czvf tiny_mce.tar.gz tiny_mce/ && scp tiny_mce.tar.gz username@serverhost:~/

-move or cp that file to your Magento install *this varies*

mv tiny_mce.tar.gz /home/account/public_html(webroo)/magentoinstall/js/

-untar it,

tar -xzvf tiny_mce.tar.gz

should look like the following:

magentofolder/js/tiny_mce/tiny_mce.js

Checking Core for Wysiwyg Switch (will need to re-check per version until Magento defaults to ‘True’, should be an admin system config) 2. Check Core for CMS switch:

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

around line: 100, ensure the following

'wysiwyg' => true,

also (for static block editor)

/app/code/core/Mage/Adminhtml/Block/Cms/Block/Edit/Form.php 

around line: 109

'wysiwyg' => true,

(Add by: ezdub)

Adding Universal-Dynamic Administrative Javascript Reference 3. Add the javascript call to the Template Page file, enabling universal Administrative Use. Where:

 public_html/app/design/adminhtml/default/default/template/page.phtml 

end of Line: 37

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

Adding Pre-loaded information to Content Areas 4. Need to Pre-load content into boxes to pass Required Field Check Where: magento/app/design/adminhtml/default/default/template/page/head.phtml Line: 41

<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>Page Content</p>";
        }
    }
}
 

Repeat for: (Add by: sh1ny) if(document.getElementById(’block_content’)){ if(document.getElementById(’description’)){ if(document.getElementById(’short_description’)){

Adding the Editor to Desired Locations in the Admin: When updating these locations... remember to: Remove any Javascript references to a Tiny MCE Javascript path. Reasoning? A) we have universal access, so this is redundant. B) won’t work if using user_mod C) hard coding links = bad

5. CMS/Pages - Where:

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

Activate editor: Uncomment Line 54 and uncomment line 68

                                  <script language="javascript" type="text/javascript">
                Event.observe(window, 'load', function() {
                    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 : "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>';

ezdub adds- to work on 1.1.4 I tweaked ‘theme’ line above with:

                        theme : "advanced",
                        strict_loading_mode : true, 

6. Catalog/Products - Where:

app/design/adminhtml/default/default/template/catalog/product/edit.phtml  

Add editor: after line 48 (closed form tag)

<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",
                        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>

Result: Works like a Gem. Last Updated: Sept 9th ~Josh

Encapsulated tinyMCE.init with Event.observe Last Updated: 2008-09-12, GreenSkunk

wysiwyg=true for static block editor Oct 15th -ezdub (tested great on 1.1.4)