How to add open source third party plugin to XWiki CKEditor?

For this tutorial, we'll use Color Dialog.

The brief description of procedure is present in Use additional CKEditor plugins.

1. First of all, we have to download the source files.
2. Next unzip the plugin files. Extract the contents of the archive into the directory:

   webapps\xwiki\resources\colordialog

3. Restart the XWiki instance, XWiki needs to know about new local files.
4. Next we need to define external plugin for CKEditor. Create page with content (optional) that explains for what reason this page exists.
5. Add JSX object to this page with below code, usage of this extension - on this Wiki, and enable parse content

   require(['deferred!ckeditor'], function(ckeditorPromise) {
     ckeditorPromise.done(function(ckeditor) {
       CKEDITOR.plugins.addExternal('colordialog', "$xwiki.getSkinFile('colordialog/plugin.js')");
     });
   });

6. (Optional) You can make this page hidden and move to CKEditor space.
7. Finally, enable the plugin. Go to the XWiki Administration → Content → WYSIWYG Editor or navigate directly to the "CKEditor.AdminSection" page via navigation keyboard shortcut, then add the following line at the end of the Advanced Configuration:

   config.extraPlugins = 'colordialog';

8. Save the changes and perform a hard refresh the current browser tab.

Now let's verify - a new plugin has to be available in the CellProperties window when editing the page that contains table. Visiting the Sandbox page we can find a table, clicking at any table cell RMC (open context menu) → CellProperties → we'll observe a new button "Choose" near field background and border colors.