How to Add WYSIWYG FCKeditor to you Magento Store

Last modified by bmcon on Wed, September 9, 2009 05:08
Source|Old Revisions  |  Back To Group

Ok, so lets get to it.

The first part of the installation deals with setting fckeditor to the correct size before you uload it to your Magento store on your server.

Step 1: Goto to http://www.fckeditor.net/download and download the editor and save it to your computer, anywhere is fine just remember the location.

Step 2 Unzip the folder locate the fckeditor.js file within the fckeditor folder.

Step 3 Open the fckeditor file in notepad. locate the text that reads as follows: this.Width = width || ‘100%’ ; this.Height = height || ‘200’ ;

Step 4 Change the values at the end to read as follows: this.Width = width || ‘800’ ; this.Height = height || ‘500’ ;

Step 5 Save the file in the same fckeditor folder, you will be asked to overwrite the existing file, click yes.

Step 6 Login to you server via ftp and locate the js folder within your magento root directory, double click and open the folder. Now upload the fckeditor folder to this directory. once that is done you can close your ftp client.

The following steps involve us locating and modyfing a few Magento files so you store can find, access and use Fckeditor.

Step 7 Login to your store using your client and locate the following file /app/code/core/Mage/Adminhtml/Block/CMS/Page/Edit/Tab/Main.php. Download it your computer and open it using Wordpad or Microsoft Expression Web. Modify the file from this:

$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, ));

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’ ⇒ true, )); this allows us to switch on the wysywyg capabilities of Magento. Once that is done save as the file in a different location than the original one, so you can always go back to the original file if you make a mistake.

Now upload this changed file back to your magento folder and place it in the same directy as the original one. If you are asked to overwrite it click yes.

Step 8 Still keeping your FTP client or software open locate the following file: /lib/Varien/Data/Form/Element/Editor.php, download it your computer, open it in wordpad or ms expression web and replace $html = ‘...’; with the following code:

$html = ‘<textarea name=”‘.$this→getName().’” title=”‘.$this→getTitle().’” id=”‘.$this→getHtmlId().’” class=”textarea ‘.$this→getClass().’” ‘.$this→serialize($this→getHtmlAttributes()).’ >’.$this→getEscapedValue().’</textarea> <script type=”text/javascript” src=”/js/fckeditor/fckeditor.js”></script> <script type=”text/javascript”> window.onload = function() { var oFCKeditor = new FCKeditor( “’ . $element .’” ) ; oFCKeditor.BasePath = “/js/fckeditor/” ; oFCKeditor.ReplaceTextarea() ;

                 }
             </script>';

Once that is done save as the file in a different location than the original one, so you can always go back to the original file if you make a mistake.

Now upload this changed file back to your magento folder and place it in the same directy as the original one. If you are asked to overwrite it click yes. Step 9 Still keeping your FTP client or software open locate the following file: /app/design/adminhtml/default/default/template/page/head.phtml.Add the following line of code to the file after the:

After <script type=”text/javascript”> var BLANK_URL = ‘<?php echo $this→getJsUrl() ?>blank.html’; var BLANK_IMG = ‘<?php echo $this→getJsUrl() ?>spacer.gif’; var BASE_URL = ‘<?php echo $this→getUrl(’*’) ?>’; var SKIN_URL = ‘<?php echo $this→getSkinUrl() ?>’; </script>

<script type=”text/javascript” src=”http://www.yoursite.com/js/fckeditor/fckeditor.js“></script> <script type=”text/javascript”> window.onload = 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>”; } var oFCKeditor = new FCKeditor( ‘description’ ); oFCKeditor.BasePath = “http://www.yoursite.com/js/fckeditor/“; oFCKeditor.ReplaceTextarea(); var pFCKeditor = new FCKeditor( ‘short_description’ ) ; pFCKeditor.BasePath = “http://www.yoursite.com/js/fckeditor/” ; pFCKeditor.ReplaceTextarea() ; } if(document.getElementById(’_generaldescription’)){ if(document.getElementById(’_generaldescription’).value == ){ document.getElementById(’_generaldescription’).value = “<p>Enter category description</p>”; } var qFCKeditor = new FCKeditor( ‘_generaldescription’); qFCKeditor.BasePath = “http://www.yoursite.com/js/fckeditor/“; qFCKeditor.ReplaceTextarea(); } if(document.getElementById(’page_content’)){ if(document.getElementById(’page_content’).value == ‘‘){ document.getElementById(’page_content’).value = “<p>Enter CMS content</p>”; } var rFCKeditor = new FCKeditor( ‘page_content’); rFCKeditor.BasePath = “http://www.yoursite.com/js/fckeditor/“; rFCKeditor.ReplaceTextarea(); } } </script>

Step 10 VERY IMPORTANT Change the http:// values to reflect the name of your site. If you are running SSL and you have secured you backend as well as your front end, the change the http to https. If you do not doe this Fckeditor will not show up in your admin panel of Magento.

Once that is done save as the file in a different location than the original one, so you can always go back to the original file if you make a mistake.

Now upload this changed file back to your magento folder and place it in the same directy as the original one. If you are asked to overwrite it click yes.

ALL DONE! Login to your Magento admin and add anew product or try and modify an existing one. Checkout your new WYSIWYG editor. This editor also works on all you pages incuding Home, About Us etc.

if you have any questions or you would like to drop me an email, please do so at: guilio@connectmeisp.co.za




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs