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.

Enable CKEditor in CS Cart

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

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.

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.

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.

Enjoy your CKEditor and it's plugins

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'
                ]
        ];
};