Installing Big Add-on Bundle for CKEditor + debugging manual

Introduction

Thank you for purchasing Big Add-ons Pack. This article will guide you through installations process. This article is pretty big, but in fact the installation process is pretty easy. This article is just full of detailes, it describes most of specific usage cases and most of it may be omitted. Also here you can find common diagnosis techniques.

Installing Big Add-ons Pack's plugins to CKEditor

At first check your e-mail and get access credentials to access our delivery service. The letter with them was sent to you automatically. If you do not see the letter please check you spam folder. Go to files.doksoft.com, type your access credentials, go to My files section and download your file.

Installing Big Add-on Bundle for CKEditor download file screenshot

Installation

Unpack the archive's contents to ckeditor/plugins directory on your server.
Open ckeditor/config.js file in your text editor. This article assumes that you have default contents in it. It looks like:
```
CKEDITOR.editorConfig = function( config ) {
    config.language = 'en';
};
```
It can contain other options, you can remove them or not (up to your).

You need to let CKEditor load the plugin on load. Add this line into it:

config.extraPlugins = "doksoft_advanced_blocks,doksoft_alert,doksoft_backup,doksoft_breadcrumbs,doksoft_button," +
"doksoft_custom_templates,doksoft_easy_file,doksoft_easy_image,doksoft_easy_preview,doksoft_file," +
"doksoft_font_awesome,doksoft_gallery,doksoft_image,doksoft_image_embed,doksoft_include,doksoft_maps," +
"doksoft_preview,doksoft_rehost_file,doksoft_rehost_image,doksoft_special_symbols,doksoft_syn,doksoft_table," +
"doksoft_translater,doksoft_youtube";

No spaces before "," please. Or just copy this text to your config.js file.

Then you need to add the buttons on your toolbar. Due to there is currently no toolbar in the configuration file, CKEditor uses default one and you need to redefine it to add buttons on the toolbar. This is full toolbar's definition including all add-ons from DOKSoft Big Add-ons Bundle:

config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] },
    '/',
    { name: 'doksoft', items: ['doksoft_image_embed', '-', 'doksoft_easy_image', 'doksoft_easy_preview', 'doksoft_easy_file', '-', 'doksoft_image', 'doksoft_preview', 'doksoft_file', 'doksoft_gallery', '-', 'doksoft_rehost_image', 'doksoft_rehost_file', '-', 'doksoft_advanced_blocks', 'doksoft_maps', 'doksoft_youtube', 'doksoft_font_awesome', 'doksoft_alert', 'doksoft_breadcrumbs', 'doksoft_button', 'doksoft_custom_templates', 'doksoft_special_symbols', 'doksoft_syn', 'doksoft_table', '-', 'doksoft_translater', 'doksoft_translater_settings', 'doksoft_translater_reverse', 'doksoft_backup_save', 'doksoft_backup_load'] }
];

You can remove any of these buttons if you do not need them.

To disable CKEditor's client side contents filtering paste this to your config.js:
```
config.allowedContent = true;
```
This will avoid many problems with specific contents you can insert with the plugins.

This is the contents of config.js usually looks like after making all these steps (example):

CKEDITOR.editorConfig = function( config ) {

    config.language = 'en';
    
    config.allowedContent = true;
    
    config.extraPlugins = "doksoft_advanced_blocks,doksoft_alert,doksoft_backup,doksoft_breadcrumbs,doksoft_button," +
"doksoft_custom_templates,doksoft_easy_file,doksoft_easy_image,doksoft_easy_preview,doksoft_file," +
"doksoft_font_awesome,doksoft_gallery,doksoft_image,doksoft_image_embed,doksoft_include,doksoft_maps," +
"doksoft_preview,doksoft_rehost_file,doksoft_rehost_image,doksoft_special_symbols,doksoft_syn,doksoft_table," +
"doksoft_translater,doksoft_youtube";

config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] },
    '/',
    { name: 'doksoft', items: ['doksoft_image_embed', '-', 'doksoft_easy_image', 'doksoft_easy_preview', 'doksoft_easy_file', '-', 'doksoft_image', 'doksoft_preview', 'doksoft_file', 'doksoft_gallery', '-', 'doksoft_rehost_image', 'doksoft_rehost_file', '-', 'doksoft_advanced_blocks', 'doksoft_maps', 'doksoft_youtube', 'doksoft_font_awesome', 'doksoft_alert', 'doksoft_breadcrumbs', 'doksoft_button', 'doksoft_custom_templates', 'doksoft_special_symbols', 'doksoft_syn', 'doksoft_table', '-', 'doksoft_translater', 'doksoft_translater_settings', 'doksoft_translater_reverse', 'doksoft_backup_save', 'doksoft_backup_load'] }
];
    
};

You config.js might a bit differ with it.
In most of the cases you plugins are ready to work and if you test your CKEditor installation you see something like that:

Installing Big Add-on Bundle for CKEditor screenshot

Note that some add-ons need to be configured separately. For example Custom Templates and Include plugins will work but will do nothing until you specify what they need to do. Read theirs customization articles to do this. This is also related to other add-ons which can be customized.

Upload plugins configuration

If you use any of upload plugins, i. e. Quick Image Upload add-on (yes, Big Add-ons Bundle contain them) they will automatically find the path of script handling file uploads and the path where the files are stored into. Just check you CKEditor installation: in most of the times it will work without any problems any you omit this step. If it had not automatically worked please to next steps:

Check that directory ckeditor/plugins/doksoft_uploader/userfiles is writable. See the screenshot with correct directory's permissions assignment. Username/group and correct rights might differ from server to server. This is example for dedicated server/VPS Ubuntu+Apache web server:
You can change directory's permissions by typing this command (in `ckeditor/plugins/doksoft_uploader` directory):
```
chmod 750 userfiles
```
To change owner use this command (in the same directory):
```
sudo chown www-data:www-data userfiles
```
You can use any other tool to set permissions and owner, the example above is related to standard Unix (Linix, BSD) console commands.
Check that files into ckeditor/plugins/doksoft_uploader/userfiles/ are accessible by URL. To do this try to copy file there (do not forget to assign correct permissions to it!) and try to get it by the URL.
For PHP servers: check that script ckeditor/plugins/doksoft_uploader/uploader.php is accessible by URL. For doing actions (2) and (3) we recommend to use your browser's debugger to see what's going on when you try to get the files. I. e. in Google Chrome you need to press F12 (it will open debug console) and go to tab "Networking". Then make a request typing an URL in the regular browser's address bar and see the result
- If you get error #404 this means that you typed incorrect URL or your webserver's URL routing is configured not properly.
- If you get error #403 you have a problems with file or directory permissions.
- If you get error #500 this means you have some problems on server side. Please check your webserver's logs to know more.
If you get #200 result code this means that all has worked fine and image or file was inserted into your CKEditor's document. If you still do not see an image or can not download file please check its URL and change $config['baseURL'] value in config.php file. See Specific URL routing section below for changing that.
NB! If you use .NET environment (i. e. use Microsoft IIS server) and do not have PHP runtime installed you use .NET uploader. We have detailed article describing .NET uploader installation on you server.

Specific URL routing with PHP uploader

This is section for advanced users only. Typically you need to omit this section. It assumes that you already reconfigured your URL routing using your webserver's (i. e. Apache, Nginx) or CMS (i. e. Joomla) configuration. If you need to use specific URL routes this will affect to your upload plugins. You need to manually set client and server configuration for them.

Add full URL to your upload script in the config.js file. This will let your plugins to understand where to locate uploader:

config.doksoft_uploader_url = 'http://your-website.com/url/for/uploader.php';

Then you need to specify to uploader where to store files and how to build URLs for uploaded files. Open ckeditor/doksoft_uploader/config.php and set you values for your two variables:

$config['baseURL'] - the full URL prefix for your uploads. For example if you have this code:
```
$config['baseURL'] = 'http://your-webserver.com/uploads/';
```
the uploader after uploading files will return to plugin files' URLs like this:
```
http://your-webserver.com/uploads/uploaded_file.jpeg
```
$config['baseDir'] - the full path to your directory where uploader need to store the files. If you not sure how to write it, write absolute path. Example of this option:
```
$config['baseDir'] = '/var/www/uploads/';
```
This example is for directory uploads located in the root of your webserver: /var/www/ If something not works after this customization please debug it with "Network" tab of developer tools in your web browser.

Notice for CMS users

If you are using some CMS (content management system) the installation process may be different to described here (Drupal's and Joomla's toolbars for example are configured in other way). Please check documentation of your CMS to find out more. Also we have Drupal manual describing installation of JS+ plugins there.