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/