Installing CKeditor (fckeditor) and CKfinder instead of tinyMCE

[uddhava 66]

Compatibility : 1.3
Remarks : This will change Prestashop core files. After an update you have to implement this again.
History
02 jun 2010 : Creation date

Intro
I was trying to integrate the CKeditor & CKfinder into Prestashop. So far i managed to install both plugins but there are still some bugs to iron out. Maybe this code can be transplanted later into a module so we dont need to change core files. There already is a paid module available in the prestastore for CKeditor, but since it is not so difficult to implement it, i rather save my euros. So i will post a small HOWTO to implement both programs. Lets see where it will take us.
-> In this example we assume the CKeditor/CKfinder software is copied in the "js" folder from PS.

Installing CKeditor

-download the latest CKeditor : http://ckeditor.com/download
-Upload the ckeditor folder by FTP to the "js" folder inside your prestashop root folder
-> So for example : /myshop/js/ckeditor

Part 1
-edit /admin/tabs/AdminCMS.php
-Delete lines 110-147 (Prestashop 1.3)

old code (cut)

// TinyMCE
       echo '
      <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 : false,
                   content_css : "'.__PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/global.css",
                   document_base_url : "'.__PS_BASE_URI__.'",
                   width: "582",
                   height: "auto",
                   font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
                   // 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>
       ';

New Code

// TinyMCE
       echo '
      <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>
       <script type="text/javascript" src="'.__PS_BASE_URI__.'js/ckfinder/ckfinder.js"></script>
           <script type="text/javascript">
               $().ready(function() {
               $(\'textarea.rte\').ckeditor();

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

Part 2
-edit /admin/tabs/AdminProducts.php
-Delete lines 2000-2038 (Prestashop 1.3)
-Insert the same code as shown above

Bugs
Everything seems to work, except that when you resize the edit window it always defaults to a much bigger width. I tried setting the max. width in the config.js but that does not seem to help
There are quite some bugs/annoyances. Inserting URLS does not work..
Popup windows are misaligned (due to css probs ?) etc etc

[Burhan BVK 77]

The forum removes script tags from the posts. To make it display properly you should start it with & lt; (without the space)

[uddhava 66]

Ok, i am not even gonna argue about why the forum would do that, but i have corrected it.

[uddhava 66]

In my example i change two core files (AdminCMS and AdminProducts).
I am wondering if it is possible to add the CKeditor and CKFinder code in such a way that it just overrides tinymce?
So then i dont have to change core files?

Is this possible with hooks ?

ys

[uddhava 66]

There is a paid module for FCKeditor in the Prestashop.
I wonder if somebody is using this and if they could tell me how this module is hooking into the core files?
Whats happening under the hood?

[ysco 77]

@ uddhava

Hello Mate thanks for the info regarding implement CKeditor, i have it working now.
I also played with CKfinder and it did not work first, i have it working now but not completely yet but most things work.
But it seems that CKfinder normally needs a license that you can buy for 50+ but it will work but you will get the demo message and i don`t know if you have a full working version then.But i can upload pictures true the filebrowser but the option Upload only does not work yet.


ysco..

[uddhava 66]

It looks like you are "stuck" on the same place as me.
I also got CKfinder working, but not the upload tab/button.
The Browse button works and uploading from there also works, but it is not secure. Everybody can access this directory..

I am quite busy finalizing my webshop so i hope i have some time to try things with CKFinder

[ysco 77]

Hello uddhava,

Yep that is indeed where i m also stuck.

You probably also make it working to set false to true in config.php but then it is indeed not secure.
I had it working so that only admin had access and no one else but for some reason it don`t work anymore that way.
I have been playing but till now no go to make it working and that it is secure, did read a lot on the forum ckfinder but the solutions did not work for me.
And the upload tab/button when using that it says every time ( The requested resource type is not valid. ) i try different things but can`t figure out that problem also.
Will try again between the WK plays on TV
If you find something then please share as this is a great add on .

ysco..

[ysco 77]

Hello uddhava,

I managed to make at least the file browser secured i think,

In CKfinder config.php do the following,

In top of the config.php just below <?php you add this line --> session_start(); <-- then on line 34 set return false to return true.
Then on line 135 you put this line--> $_SESSION['CKFinder_UserRole'] = "here your name or password"; <--
Then on line 138 you see this line-->'role' => 'here the exact name as you put in line 135', <-- 

--> this is only to mark the file so not include that

If the name from 135 don`t match the name in line 138 then you won`t have access to the filebrowser ( it don`t load your folders then ) so no one can see then either.

Hope this helped for you.
Will try now to figure out the upload /tab button and see if i can make it work to.

ysco..

[uddhava 66]

I will try your code to make it secure. I will post the exact code later.

I also get this strange message "The requested resource type is not valid"
And when i google this we are not alone.....

[ysco 77]

Hello uddhava,

Yes indeed i also searched true google and try`t many things to make the upload tab working by reading all the fixes on the internet.
Many people have the same problem.
Hope we can figure it out so that it works.

ysco..

[uddhava 66]

I found an alternative for CKFinder (which requires a license) called KCFinder ;-)
. Somebody copied the code and created a "fork".
See website here : http://kcfinder.sunhater.com.
I will try it out later. I had some frustrating time trying out all the suggested upgrades of TinyMCE, CKEditor and more...
For every new version of PS you have to start all over.. It is getting frustrating.

[ysco 77]

Hello uddhava.

Will check it out

Thanks mate.

ysco..

[ysco 77]

Well this KCfinder works a thread.

Only changed config.js from KCEditor and changed the setting in config.php from KCFinder to false and works right out the box.
All is working and i see no difference in KCfinder menu comparing with CKfinder, only less settings in config.php so no difficult stuff to make it working.

CKeditor and KCfinder is a great combination this way.

So thanks again uddhava

ysco..

[uddhava 66]

I have been struggling with this for too many hours now.
I cannot get CKeditor to behave nicely.
All the pop-up windows (for example insert image) have strange CSS misalignments.
And the placeholder for flash does not display in the content window..
(see attached image for my frustration)

[ysco 77]

Hello uddhava

Hehe lol well i also have the strange css misalignments and did not look at it yet, but uploading and the browse option works without a hitch.
Would be nice to solve the cosmetic problem, maybe the size off the from needs to be adjusted , will look in it more and see if i can find something .

ysco..

[ysco 77]

Hello uddhava.

Well i manage to solve the css problem and fixed as i can see a 100%

copy the dialog.css and editor.css file that i attached then go to CKeditor/skins/kama and replace the existing files with mine, now check BO again and test


ysco..

dialog.zip

editor.zip

[LeGastronome 6]

Background color of the theme is not retake ?

[satano 0]

Hello everyone

Another solution to problem with strange dialogs in CKEditor is to edit PrestaShop's admin.css file. Fing styles for forms - they are marked with /* FORMS */. And change all of them so they apply only for element with id content. For example:

form {
   margin: 0;
   padding: 0;
}

change to

#content form {
   margin: 0;
   padding: 0;
}

S(a)tano

[uddhava 66]

Thats is a good suggestion. I will try that :-)

[calua 0]

Just in case anyone also have problem with the layout on CKEditor popup/dialog box. I managed to fix it with adding this simple CSS:

.cke_skin_kama div {clear:both;}

on js/ckeditor/skins/kama/editor.css

Hope it helps anybody, because this forum thread is number 1 when I googled for Prestashop and CKEditor.

[Satkala 0]

 hello

i want inistall ckeditor for my prestashop , but i can not. pls help me . pls comment step by step . tanks