5_-_modules_and_development:wysiwyg:tiny_mce

Last modified by GreenSkunk on Fri, June 25, 2010 10:33
Source|Old Revisions  

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

Installing Tiny MCE 1. downloaded tiny_mce,[code] http://prdownloads.sourceforge.net/tinymce/tinymce_3_1_1.zip?download[/code] -unzip it, and change directory to : tinymce/jscripts/ -tarball and transfer the file to your server [code]tar -czvf tiny_mce.tar.gz tiny_mce/ && scp tiny_mce.tar.gz username@serverhost:~/[/code] -move or cp that file to your Magento install *this varies* [code]mv tiny_mce.tar.gz /home/account/public_html(webroo)/magentoinstall/js/[/code] -untar it, [code]tar -xzvf tiny_mce.tar.gz[/code] should look like the following: [code]magentofolder/js/tiny_mce/tiny_mce.js[/code]

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: [code]/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php [/code] around line: 100, ensure the following [code]’wysiwyg’ => true,[/code]

Adding Universal-Dynamic Administrative Javascript Reference 3. Add the javascript call to the Template Page file, enabling universal Administrative Use. Where: [code] public_html/app/design/adminhtml/default/default/template/page.phtml [/code] end of Line: 37 [code]<script type=”text/javascript” src=”<?php echo $this->getJsUrl(’tiny_mce/tiny_mce.js’) ?>” language=”javascript”></script> [/code]

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 [code]<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>";
      }
  }

[/code] 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: [code] lib/Varien/Data/Form/Element/Editor.php [/code] Activate editor: Uncomment Line 54 and uncomment line 68 [code]

                                <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>';

[/code]

5. Catalog/Products - Where: [code]app/design/adminhtml/default/default/template/catalog/product/edit.phtml [/code] Add editor: after line 48 (closed form tag) [code] <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> [/code]

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

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




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs