6

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 :)

2
  • 1
    I'm assuming you tried to use $('element').autocomplete() already? I mean, it seems as if there's an input, you can simply call autocomplete() on that element, regardless of the parent.
    – Ohgodwhy
    Jul 8, 2012 at 18:48
  • Possible duplicate (answered): Autocomplete lists in CKEditor
    – ruffin
    Sep 8, 2015 at 14:47

2 Answers 2

4

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');

enter image description here enter image description here

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/

1
  • this is such an underrated answer
    – Batavia
    Oct 28, 2015 at 14:24
2

I did remotely something similar that, not with CKEdit but with markItUp.

The autocomplete work is done by a plugin based on jQuery UI.

I had the trouble to integrate autocompletion within a CKEdit textarea. Then I reflected better and changed requirements. I preferred a markup editor instead of WYSIWYG editor (word processor like). Maybe this doesn't apply to you, but consider to evaluate this point of view, too.

If you can turn your wysiwyg textbox into markup editor, the nice surprise is that markItUp and the autocomplete plugin play very well together. Just setup your textarea for markItUp, then enable the autocomplete. markItUp docs is good, not the same is for the plugin. For it there is a demo project.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.