Pasting text via jquery, hilighting text, and tabbing within the editor

[n/a]

Hi,

I have a need to paste text containing template fields into the editor via jquery with the user be able to tab between the template fields with the template field being "selected" when they are on that field

For example, the user may choose to have the following text pasted into the editor:  "Please enter the {{date}} and {{time}}.".  The template fields are {{date}} and {{time}}.   After the data is pasted, the cursor needs to be positioned in the first template field with the template field selected (hilighted).  In this example, {{date}} would be selected allowing the user to replace the template text with data that they type in.  The user could then press the tab key to move to the next template field - in this example, it would be the {{time}} template field.   The goal, for example, is to be able to paste in 20 lines of boilerplate code and simply tab to the items that need to be changed.

I have this working for a simple TextEdit field, but I now need similar  functionality for a Editor field.

I know how to paste the template string via $('#Content').data('kendoEditor').value(results.Content) but I don't know how to trap the tab key and "select" fields.

Thanks in advance,

Scott

[Ianko]

Hi Scott,

Generally, you can use the keyup event and check whether tab is pressed using the kendo.keys field. That way you will be able to trap the tab key and navigate through the Editor's content.

To navigate through the content, you can follow the code implemented in this article: https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/customize/set-caret-position-using-javascript. If you have the fields you need to traverse on tab key, you can use the same logic to set the caret position on tab.

Regards,
Ianko
Progress Telerik