Jump to content

Installing CKeditor (fckeditor) and CKfinder instead of tinyMCE


Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@ 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..

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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.....

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites
  • 1 month later...

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.

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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)

26906_JeZQfaqegqoG0zM2AU7y_t

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 5 months later...

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

Share this post


Link to post
Share on other sites
  • 4 weeks later...

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.

Share this post


Link to post
Share on other sites
  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More