Foundation Tools
for CKEditor & TinyMCE
Overview
CKEditor installation TinyMCE installation
16 in 1
Includes products:
Foundation Include CSS/JS plugin Foundation Show Blocks plugin Foundation Advanced Blocks plugin Foundation Block Configuration plugin Foundation Icons plugin Foundation Templates plugin Foundation Button plugin Foundation Image Gallery plugin Foundation Label plugin Foundation Alert plugin Foundation Move Column plugin Foundation Move Row plugin Foundation Delete Column plugin Foundation Delete Row plugin Foundation Breadcrumbs plugin Foundation Add Row plugin
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings Include Foundation to CKEditor/TinyMCE .NET uploader configuration File and Image uploader plugins FAQ Styling Image Gallery Attach images to comments in Drupal CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Foundation Tools logo
Get Foundation Tools inside
31 in 1
Foundation Bundle
$59

Adding CKEditor add-ons to CS Cart

Well, you have purchased CKEditor plugins from DOKSoft and want to install them into your CS Cart website. Here is a list of steps you are to reproduce to install add-ons correctly.

This step by step manual will show you how to install CKEditor Big Bundle plugins into CS Cart 4.2.4 but we think it will be compatible and with other CS Cart's versions too.

Copy the plugins

CS Cart's CKEditor is located at js/lib/ckeditor/, so you need to unpack all your CKEditor plugins into js/lib/ckeditor/plugins/ directory.

CS Cart copy CKEditor add-ons screenshot

Enable CKEditor in CS Cart

If you have not done it before go to Settings - Appearance and set Default wysiwyg editor to CKEditor.

CS Cart settings appearance screenshot
CS Cart settinds default wysiwygscreenshot

Removing CS Cart's hardcoded CKEditor toolbar

At this moment we need to do a hack. CS Cart has hardcoded toolbar for CKEditor and you will not be able to change any toolbar buttons until remove the section from CS Cart's distributive's file.

Go to js/cscart/tygh/editors/ckeditor.editor.js and remove or comment the section toolbar: .... If you will not done this action, this option will override any toolbar settings from CKEditor's configuration file.

CS Cart disable hardcoded toolbar screenshot

Configure CKEditor

OK, we are ready to configure CKEditor. You need to do right the same we recommend to do in installation manuals of our premium plugins and what official CKEditor manual tells to do. You need to do two things:

  1. Tell CKEditor to load necessary plugins using config.extraPlugins option. Enumerate all the plugins you need to include to CKEditor. Do not add here doksoft_uploader because formerly it is not a plugin.
  2. Add toolbar definition. Use this official manual to understand its format.

To to these go to js/lib/ckeditor/config.js and edit it. All the plugin's machine names used in plugins option and their buttons used on toolbar you can find in the each plugin's installation manual. Just go to required plugin's page on DOKSoft.com and see "Installation" link.

CS Cart CKEditor config js editing screenshot

Clear CS Cart's cache

Sometimes before you start to use your CKEditor with the new plugins you need to clear CS Cart's cache. Go to Administration - Storage - Clear cache and all changes you have done before will be applied. Do not forget to clear also your webserver's (Nginx, Apache, etc.) caches if you having any similar problems.

CS Cart clear cache screenshot

Enjoy your CKEditor and it's plugins

CS Cart CKEditor configurated screenshot

Here we paste full contents or js/lib/ckeditor/config.js file to help you configure the CKEditor faster:

CKEditor.editorConfig = function( config ) {
        config.language = 'en';
        config.extraPlugins = 'doksoft_image,doksoft_preview,doksoft_file,doksoft_gallery,' +
                              'doksoft_easy_image,doksoft_easy_preview,doksoft_easy_file,doksoft_image_embed,' +
                              'doksoft_rehost_image,doksoft_rehost_file,' +
                              'doksoft_advanced_blocks,doksoft_button,doksoft_font_awesome,' +
                              'doksoft_maps,doksoft_html,doksoft_include,doksoft_special_symbols,' +
                              'doksoft_syn,doksoft_translater,doksoft_table,doksoft_templates,' +
                              'doksoft_youtube,doksoft_backup,doksoft_alert,doksoft_breadcrumbs';
        config.toolbar = [
                [ 'doksoft_image', 'doksoft_preview', 'doksoft_file', 'doksoft_gallery' ],
                [ 'doksoft_easy_image', 'doksoft_easy_preview', 'doksoft_easy_file', 'doksoft_image_embed' ],
                [ 'doksoft_rehost_image', 'doksoft_rehost_file' ],
                [ 'doksoft_maps', 'doksoft_youtube' ],
                [ 'doksoft_backup_save', 'doksoft_backup_load' ],
                [.
                    'doksoft_advanced_blocks', 'doksoft_button', 'doksoft_font_awesome',
                    'doksoft_html', 'doksoft_special_symbols',
                    'doksoft_syn', 'doksoft_translater', 'doksoft_table', 'doksoft_templates',
                    'doksoft_alert', 'doksoft_breadcrumbs'
                ]
        ];
};