How to implement CKEDITOR instead of TinyMCE

[sk8hack]

I was having problems when inserting tables, so I decided to change the WYSIWYG editor to one that I consider the best.
First you need to download CKEditor here http://ckeditor.com/download
then extract the folder called ckeditor in /js/

Go to /ADMIN/tabs
Now open AdminCMS.php AND AdminProducts.php

Look for

       < script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></ script>

< script type="text/javascript">
       function tinyMCEInit(element)
       {
           $().ready(function() {
               $(element).tinymce({
                   // Location of TinyMCE script
                   script_url : \''.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/tiny_mce.js\',
                   // General options
                   theme : "advanced",
                   plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",
                   // Theme options
                   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,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
                   theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
                   theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,pagebreak",
                   theme_advanced_toolbar_location : "top",
                   theme_advanced_toolbar_align : "left",
                   theme_advanced_statusbar_location : "bottom",
                   theme_advanced_resizing : true,
                   content_css : "'.__PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/global.css",
                   // Drop lists for link/image/media/template dialogs
                   template_external_list_url : "lists/template_list.js",
                   external_link_list_url : "lists/link_list.js",
                   external_image_list_url : "lists/image_list.js",
                   media_external_list_url : "lists/media_list.js",
                   elements : "nourlconvert",
                   convert_urls : false,
                   language : "'.(file_exists(_PS_ROOT_DIR_.'/js/tinymce/jscripts/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en').'"
               });
           });
       }
       tinyMCEInit(\'textarea.rte\');
   < /script>

Replace it to

< script type="text/javascript" src="'.__PS_BASE_URI__.'js/ckeditor/ckeditor.js">< /script>
< script type="text/javascript" src="'.__PS_BASE_URI__.'js/ckeditor/adapters/jquery.js">< /script>
           [removed]
               $().ready(function() {
               $(\'textarea.rte\').ckeditor();

               });
           toggleVirtualProduct(getE(\'is_virtual_good\'));
           < /script>

That's it, I don't remember if there are more sections which use WYSIWYG editor. If so, please correct me.
Thanks

[goodsdealer]

what line?

[sk8hack]

search for "tinymce.js"

[goodsdealer]

does not work!!? i replaced all but looks like there is mistake somewere in the code

[sk8hack]

yes, apparently the forum doesn't allow scrip tags, replace:
[removed]
to < script type="text/javascript">

[uddhava]

CKeditor
I have installed CKeditor with succes with the help of this thread.
I managed to install v3.3.
It is really simple actually:
download the latest CKeditor : http://ckeditor.com/download
Install it in : [root] / js folder
So for example : /myshop/js/ckeditor

Then edit the /admin/tabs/AdminCMS.php AND /admin/tabs/AdminProducts.php
insert the code as suggested in the 1st post.
And then it should work... :-)

But now comes the 2nd part which is also needed.
Installing CKfinder.

CKfinder
With this extension you can add uploads to your CKeditor.
Download it here : http://ckfinder.com/download
Install it in : [root] / js folder. So for example : /myshop/js/ckfinder
Edit ckeditor/config.js
Add the following lines:

CKEDITOR.editorConfig = function( config )
{
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';

   // added code for ckfinder ----->
   config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html';
   config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?Type=Images';
   config.filebrowserFlashBrowseUrl = '../ckfinder/ckfinder.html?Type=Flash';
   config.filebrowserUploadUrl = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
   config.filebrowserImageUploadUrl = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
   config.filebrowserFlashUploadUrl = '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
   // end: code for ckfinder ------>

};

Now i am stuck with this. Uploads do not work yet.
I think this is because of a wrong PATH (for example ../ckfinder/ckfinder.html). At least the browser is complaining ;-)
Tomorrow more

ys

[ysco]

@ uddhava

Did you find the solution yet about the upload problem ?
If so please tell me how to do.
Thanks for sharing your info so far.

@sk8hack

Thanks for sharing your info on this beautiful editor.

Edit:
It is not working for me either,

I get this in BO

< script type="text/javascript" src="/js/ckeditor/ckeditor.js">< /script> < script type="text/javascript" src="/js/ckeditor/adapters/jquery.js">< /script>  < script type="text/javascript">  $().ready(function() { $('textarea.rte').ckeditor(); }); toggleVirtualProduct(getE('is_virtual_good')); < /script>  

I replaced also the removed with the script line as mentioned, and also want to say that it is not correct posted .
This " posted in this line < script type=“text/javascript”> is also not showing correct it must be

 < script type="text/javascript">

Any advice on this one ?

ysco..

[uddhava]

No, i did not solve it.
But i have opened another thread that deals with CKeditor and CKFinder.
I will update also there.
http://www.prestashop.com/forums/viewthread/57351