Kendo UI Editor + autocomplete / auto suggest

[Eric]

Hi! I want to create an autocomplete plugin for the Kendo UI Editor, see attached mock-up. I would need to be able to:

1. On keyup, retrieve the current word being entered
2. If possible, display the suggestion list at cursor position (if not, could be displayed beneath editor)
3. When suggestion list is displayed, make arrow up/down change list selection and tab/enter/mouseclick to select
4. Replace the current word with selection from autocomplete

How much of this is achievable? (and how)
Is there a preferred way to create plugins for Kendo UI?

As an alternative; is it possible to attach any existing autocomplete plugin to the Kendo UI Editor?

Thanks in advance for any feedback!

[Alex Gyoshev]

Hello Eric,

We are not aware if this can be easily achieved, and currently the editor does not support a plug-ins other than custom toolbar tools. You can, however, use the events that the editor triggers, as well as access the editable iframe, using the fields that are attached to the editor, as follows:

var editor = $("#editor").data("kendoEditor");
editor.window; // the window object of the editable iframe
editor.document; // the document element of the iframe
editor.body; // the body element in the iframe, same as editor.document.body

Theoretically, you can attach your desired autocomplete in the editor.body element and subscribe to the select client-side event of the editor (that is triggered when the selection within the editor is changed) to close the autocomplete.

Attaching the existing autocomplete will not work, as it is attached to an input, and not to a contentEditable element. We cannot provide this functionality at this time, and it will have to be developed.

All the best,
Alex Gyoshev
the Telerik team

[Eric]

Thanks for the reply, much appreciated!

Listening to "keyup" events on editor.body works nicely, which takes me half-way.

I tried to find an un-minified version of the Kendo UI source code, but it seems it is only available if you have purchased a commercial licence, is this correct?
I was hoping to take a look at the code enabling the editor to change selected text etc. without having to purchase a product i might not be able to use.

As a side-note;
>> We cannot provide this functionality at this time, and it will have to be developed.
Are there any plans to develop something like this in the future?

[Alex Gyoshev]

Hello Eric,

> I tried to find an un-minified version of the Kendo UI source code, but it seems it is only available if you have purchased a commercial licence, is this correct? 

Well, the GPL and commercial packages both include the unminified source code, but the commercial trial doesn't. As it turns out, this is a bit confusing, so we'll see what we can do about it -- until then, you can download the GPL version and get the source code from there, to help you with the debugging. Since you are not obliged to publish your source code if you are using it privately (i.e. debugging), this shouldn't stop you.

> I was hoping to take a look at the code enabling the editor to change selected text etc 

We updated the API reference for the editor methods a few days ago, so take a look at the getSelection / getRange methods. If you are new to the selection and range objects, consider reading PPK's intro to ranges article. The kendo editor implements a compatibility wrapper around the IE ranges, so you can use the W3C range API directly.

> Are there any plans to develop something like this in the future? 

Not really. Our only fixed plans for the future is our roadmap, which gets published after every official release, and is valid for the next release only (so our fixed plans are for the next 3-4 months).
Since this functionality is rather custom, it is likely that we will first provide a better plug-in model. You can submit a suggestion on uservoice and gather some votes in order to raise its priority. Again, suggesting the plug-in model might be more useful for more users of the framework, so it might happen sooner.

All the best,
Alex Gyoshev
the Telerik team

[Mike Abel]

Hi Eric,

are you still there? Did you ever build that auto complete plug-in? @telerik - is there a plan to build this feature?

[Rumen]

Hi Mike,

I'm afraid that the requested functionality is not among the roadmap plans for Kendo Editor. If you'd like you can request it in the Feedback portal.

 

Regards,
Rumen
Telerik by Progress

[Indumati]

Hi Team,

Any recent development on this? is there any way to autosuggest data in kendo editor?

[Neli]

Hi Indumati,

The auto-suggest functionality is not supported in Kendo UI for jQuery Editor. There is a related logged Feature Request and I would encourage you to cast a vote for it. 

- https://feedback.telerik.com/kendo-jquery-ui/1360322-add-an-autocomplete-feature-in-kendo-ui-editor

What you can try in order to achieve the desired functionality is to handle the keyup event of the Editor and implement custom logic based on the pressed key:

- https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/events/keyup

Here is a small example demonstrating the approach, where the text in the Editor is replaced when entering '~m': - https://dojo.telerik.com/@NeliKondova/IsemoSuy

I hope this helps.

Regards,

Neli