Ckeditor with autocomplete?

Question

Is it possible to implement jquery autocomplete somehow into ckeditor? Creating a button is not that hard, but is it possible to hardwire that to autocomplete, so the next word that is being typed until the button is pressed again...?

Anyone, who did remotely something like that, please let me know. Or if that's not possible, a popup window of an autocomplete search, and then on click/select it'd add that selected item to ckeditor textarea/current cursor position (maybe as a link...)?

Trying not to overreach of course :)

Answer 1

In order to make a suggestion box, you will have to make your custom plugin to use context menu as suggestion box, please check out the link for the basic knowledge of making ckeditor plugin from here a link

Add this to your config.js, where autocomplete is name of the plugin

config.extraPlugins = 'autocomplete';

Then create a following directory structure/file in the ckeditor folder

ckeditor->plugins->autocomplete->plugin.js

Put the following content in your plugin.js file

CKEDITOR.plugins.add('autocomplete',
            {
                init : function(editor) {

                     var autocompleteCommand = editor.addCommand('autocomplete', {
                        exec : function(editor) {

We will need to create a dummy span in the document to calculate the current position of the menu to be shown

                            var dummyElement = editor.document
                                    .createElement('span');
                            editor.insertElement(dummyElement);

                            var x = 0;
                            var y = 0;

                            var obj = dummyElement.$;

                            while (obj.offsetParent) {
                                x += obj.offsetLeft;
                                y += obj.offsetTop;
                                obj = obj.offsetParent;
                            }
                            x += obj.offsetLeft;
                            y += obj.offsetTop;

                            dummyElement.remove();

After calculation the position, we remove the element and call the method to show the suggestions (placed in the context menu, which are configured in next function)

                            editor.contextMenu.show(editor.document
                                    .getBody(), null, x, y);
                        }
                    });
                },

Here is the listener bind on editor to check whether the current key is a # or not, CKEDITOR.SHIFT + 51 is the key combination for #

                afterInit : function(editor) {
                    editor.on('key', function(evt) {
                        if (evt.data.keyCode == CKEDITOR.SHIFT + 51) {
                            editor.execCommand('autocomplete');
                        }
                    });

reloadSuggetionBox command will be called from your external jquery to generate the menu just after the ckeditor is ready

                    var firstExecution = true;
                    var dataElement = {};

                     editor.addCommand('reloadSuggetionBox', {
                            exec : function(editor) {
                                if (editor.contextMenu) {
                                    dataElement = {};
                                    editor.addMenuGroup('suggestionBoxGroup');

                            $.each(Suggestions,function(i, suggestion)
                            {
                                    var suggestionBoxItem = "suggestionBoxItem"+ i; 
                                    dataElement[suggestionBoxItem] = CKEDITOR.TRISTATE_OFF;
                                    editor.addMenuItem(suggestionBoxItem,
                                                                        {
                                        id : suggestion.id,
                                        label : suggestion.label,
                                        group : 'suggestionBoxGroup',
                                        icon  : null,
                                        onClick : function() {
                                            var data = editor.getData();
                                            var selection = editor.getSelection();
                                            var element = selection.getStartElement();
                                            var ranges = selection.getRanges();
                                            ranges[0].setStart(element.getFirst(), 0);
                                            ranges[0].setEnd(element.getFirst(),0);
                                            editor.insertHtml(this.id + ' ');
                                            },
                                            });
                                    });

                                    if(firstExecution == true)
                                        {
                                            editor.contextMenu.addListener(function(element) {
                                                return dataElement;
                                            });
                                        firstExecution = false;
                                        }
                                }
                            }
                     });

                    delete editor._.menuItems.paste;
                },
            });

Here "Suggestions" is the variable present somewhere on your page with holds a list of object having a 'id' and 'label' to be shown in suggestion.

Now in order to configure these suggestions, please perform the following jquery code, after this, whenever '#' is pressed, suggestions will be shown

$('textarea').ckeditor();
CKEDITOR.on( 'instanceReady', function( evt ) {
        CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');
    });

This will load the ckeditor(contractData is name of my ckeditor instance) and configure the plugin to show suggestions currently present int the "Suggestions" variable, anytime you need to refresh/change the suggestions you just need to call this function after reloading "Suggestions" variable

 CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox');

Let me know if you get any problem on getting this working.

Find the downloadable plugin at my repo at

http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/