This is a migrated thread and some comments may be shown as answers.

Kendo UI Editor + autocomplete / auto suggest

5 Answers 219 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 23 Apr 2012, 10:18 AM
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!

5 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 24 Apr 2012, 09:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
answered on 25 Apr 2012, 02:07 PM
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?
0
Accepted
Alex Gyoshev
Telerik team
answered on 26 Apr 2012, 08:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike Abel
Top achievements
Rank 1
answered on 25 Jan 2017, 02:33 AM

Hi Eric,

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

0
Rumen
Telerik team
answered on 29 Jan 2017, 07:32 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Eric
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Eric
Top achievements
Rank 1
Mike Abel
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or