Ckeditor with autocomplete?

Question

Is it possible to somehow implement jQuery autocomplete in ckeditor? Creating a button is not that difficult, but is it possible to do this to autocomplete, so the next word that is typed until the button is pressed again ...?

Anyone who has done something like this, let me know. Or, if this is not possible, a pop-up search box for autocomplete, and then click / select it, add this selected item to the ckeditor textarea / current cursor position (possibly as a link ...)?

Trying not to convince, of course :)

Answer 1

To make an offer, you will need to create your own custom plugin for using the context menu as an offer, please read the link for basic knowledge on creating the ckeditor plugin, here is the link

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

config.extraPlugins = 'autocomplete'; 

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

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

Place the following file in the 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 range in the document in order to calculate the current position of the displayed menu.

  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 calculating the position, we delete the element and call the method to display the sentences (placed in the context menu, which are configured in the next function)

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

Here is the listener binding to the editor to check if the current key is # 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'); } }); 

Command

reloadSuggetionBox is called from your external jquery to create a menu immediately after 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 a variable that is present somewhere on your page, containing a list of objects that have an "id" and a "label" that will be shown in the sentence.

Now, to configure these sentences, execute the following jquery code, after that, whenever the "#" is pressed, the sentences will be displayed

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

This will load ckeditor (contractData is the name of my ckeditor instance) and configure the plugin to display the offers that are currently present in the "Offers" variable, anytime you need to update / change the offers you need to call this function after reloading the variable "Suggestions"

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

Let me know if you have any problems getting this job.

Find a downloadable plugin on my repo in

http://navalgandhi1989.imtqy.com/ckeditor-autocomplete-suggestions-plugin/

Answer 2

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

Autocomplete work is done by a plugin based on the jQuery user interface.

I had a problem integrating autocomplete into the CKEdit text box. Then I better reflected and changed the requirements. I preferred the markup editor over the WYSIWYG editor (like a word processor). This may not apply to you, but consider also to appreciate this point of view.

If you can turn a wysiwyg text box into a markup editor, it's nice to be surprised that markItUp and the autocomplete plugin work well together. Just set your text box for markItUp, then enable autocomplete. markItUp docs well, not the same for the plugin. There is a demo project for him.