* For the CMS edit the function getElementHtml() around line 45 of lib/Varien/Data/Form/Element/Editor.php. The updated function:
public function getElementHtml()
{
if( $this->getWysiwyg() === true )
{
$element = ($this->getState() == 'html') ? '' : $this->getHtmlId();
$html = '
';
$html.= $this->getAfterElementHtml();
return $html;
}
else
{
return parent::getElementHtml();
}
}
Remember to check the path to the js file.
The getElementHtml function also has an if statement so the code you've added won't be executed unless you change the field type to WYSIWYG.
if( $this->getWysiwyg() === true)
You can do this in /magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php, near the bottom:
$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,
));
When you get it working, TinyMCE should look like this:
{{wysiwyg:tiny_mce_in_action.gif| TinyMCE in action}}
You can change width and height of the editor in /magento/skin/adminhtml/.../.../boxes.css in line 405 and 406 (v1.1.1). TinyMCE has a nice features that allows to change the size of the editor on the fly, so this is not absolutely needed.
===== FCKeditor =====
==== Where to get it ====
You can download FCKEditor from [[http://www.fckeditor.net/download |
the FCKeditor website]]
==== How to install it ====
You can unzip the fckeditor folder wherever you like, however the best places for it are your Magento install's root or inside the js folder.
==== Getting it working ====
To call FCKeditor on any page, insert the following code.
This is what FCKeditor looks like on the category page without any customization:
{{wysiwyg:fckeditor_in_action.gif| FCKeditor in action}}
==== Getting it working with CMS pages ====
Go in /app/code/core/Mage/Adminhtml/Block/CMS/Page/Edit/Tab/Main.php and modify
$fieldset->addField('content', 'editor', array(
'name' => 'content',
'label' => Mage::helper('cms')->__('Content'),
'title' => Mage::helper('cms')->__('Content'),
'style' => 'width: 98%; height: 600px;',
'wysiwyg' => false,
'required' => true,
));
by
$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,
));
Go in /lib/Varien/Data/Form/Element/Editor.php and replace $html = '...'; by
$html = '
';
==== Without touching the core files ====
These are workarounds so you dont have to touch the core files of Magento.
== Method 1: ==
Add the code around line 12 of "app/design/adminhtml/default/default/template/page/head.phtml".
After:
Code:
== Method 2: ==
Insert the following code into magento/app/design/adminhtml/default/default/template/page/head.phtml:
== Method 3: ==
Insert the following code into magento/app/design/adminhtml/default/default/template/page/head.phtml: Start on the ?> line and insert this
$baseUrl = $this->getJsUrl("fckeditor");
$server = $_SERVER['SERVER_NAME'];
$basePath = substr($baseUrl,stripos($baseUrl,$server) + strlen($server));
?>
Benefits: All text areas in the admin area will have now have a "Rich Text" link beside them. Clicking this link will invoke the fckeditor for this fields.
==== Make it BIGGER ====
For magento 1.0 release for WYSIWYG on CMS, replace in skin/adminhtml/default/default/boxes.css:
columns .form-list td.value { width:auto; padding-right:5px; }
by
/* @hack FCKEditor */
.columns .form-list td.value { width:270px; padding-right:5px; }
#page_tabs_main_section_content td.value { width:100%; padding-right:5px; }
You can optionally replace in /js/fckeditor/fckeditor.js :
this.Height = height || '200' ;
by
this.Height = height || '600' ;
For earlier releases:
Add the following code in skin/adminhtml/default/default/boxes.css:
...
#_generaldescription___Frame{
width: 550px;
height: 600px;
}
...
==== Additional Tips and Tricks ====
== Use fckEdit to upload images ====
1. Create directory to store uploaded files. I've created one under media/upload
2. ChMod newly created dir to 777
3. Edit connector files under /js/fckeditor/editor/filemanager/connectors/php/config.php
Change:
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/media/upload/' ;
Description apply to Apache/PHP installation. For Windows/other look at others catalogues to find proper connector.
== Unable to create new product/category/cms page? ==
I had a problem when creating new products, categories, and cms pages. Magento wouldn't recognize the information enterted into FCK's editing field. To get around this I added the following javascript, which injects some text into the textarea prior to being converted to FCKEditor.
...
if(document.getElementById('description').value == ''){
document.getElementById('description').value = "Enter description
";
}
...
====== Other Solutions ======
For people, like me, which dont have any idea where to put above code theres other solution for saving new files created in fckEditor.
Please look at:
http://www.magentocommerce.com/boards/viewthread/7596/
In newly created pages use fckEditor build-in SAVE button first
----
I (dieter21) am using Magento versie 1.0.19870.4 and couldn't get things working using the above tutorial. So here is what I did to make things work for editing CMS pages.
For some reason I didn't had the tinyMCE folder in the js folder so I manually downloaded TinyMCE 3.1.0.1 from [[http://tinymce.moxiecode.com/]] and put the javascript files in a selfmade /js/tiny_mce folder. (The javascript files are in the folder where the file 'tiny_mce.js' is located)
Change file //app/code/core/Mage/Admin/html/Block/Cms/Page/Edit/Tab/Main.php// and put the wysiwyg value on line 100 to true so it looks like 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' => true,
));
Change file //lib/Varien/Data/Form/Element/Editor.php// and replace everything between the tags in the $html variable with this:
Notice the url http://www.your-domain.com/skin/frontend/interface/theme/css/styles.css which U should replace with the correct values to see the right styles.
Change file //app/design/admin/html/default/default/template/page.phtml// and add the following code after line 37:
Warning: This is not the most correct way to include the javascript, but it was the only solution I found to include it in the right place and the right way.