Kendo UI Editor (inline)

[Devs]

How do I insert plain text into the editor frame at the current cursor position, from a drop down list (on the toolbar)? I can insertHtml() but that messes up the styling of the inserted element as it (in my case) breaks up the Span element

[Alex Gyoshev]

Hello Jeff,

There is no official way to insert markup without splitting the content. Can you please elaborate the use case for this?

You can theoretically get the current selection through the getRange method and use the insertNode method, but that will skip the undo/redo stack and might denormalize the DOM (so elaborating your scenario will make us consider implementing a more robust solution):

var editor = $("[data-role=editor]").data("kendoEditor");
var range = editor.getRange();
range.insertNode(editor.document.createTextNode("foo"));

Regards,
Alex Gyoshev
Telerik

[Devs]

Thanks for the quick response, Alex.

Sure, I can elaborate for you. It is a simple use case, actually. I am creating a custom drop down list on the inline-editor toolbar which contains basic mail merge strings (e.g., text: First Name, value: [[FirstName]]) When the user selects one of the options, I wanted to insert the value (in plain text) this is so that eventual replacement will be in the same styles that are set in the parent SPAN element.

[Alex Gyoshev]

Hello Jeff,

Indeed, such a scenario makes sense. We have exposed an additional parameter for the insertHtml command that makes this possible:

    editor.exec("insertHtml", { html: "[[FirstName]]", split: false });

While this is not enabled in the insertHtml toolbar drop-down, it can be achieved through a custom drop-down and the updated exec command. The change will be included in the next internal build, available to customers with a subscription.

Regards,
Alex Gyoshev
Telerik

[Bob]

Hi, after upgrading to 2014 Q2 release, this script below now inserts the html at the beginning of the editor field instead of where the cursor is.  I also tried with the script example in above post but it does the same thing.  Any ideas of what happened?

editor.exec("inserthtml", { value: $(keyValue).data("emailnotificationtemplatevariablekeyvalue") });

[Bob]

Follow-up from above post:

This occurs in IE8 and IE11.  The latest version of Chrome and Firefox (on Windows 7) work as expected and as in previous Kendo version.

[Bob]

Well, I figured out the work-around for my issues above...

My scenario: when a user clicked a list item on page (outside of kendo control), the insertHtml call would get executed and insert HTML at the cursor point in the editor.  This broke in IE only with 2014 Q2 release.  The fix was to add UNSELECTABLE="ON" to the list items being clicked.  Whatever changed in this last release caused IE to lose the selected text in editor, so it was dumping the html at beginning of field.

[Alex Gyoshev]

Hello Bob,

Can you please elaborate, is there a regression in the Kendo UI Editor in recent releases? If so, can you provide a snippet that reproduces it? On our side, the editor snippets demo inserts the snippet at cursor position.

Regards,
Alex Gyoshev
Telerik

 

 

[Bob]

I have a list of <li> tags. When you click on one, it will execute below statement that pulls a string value from the <li> tags data attribute "emailnotificationtemplatevariablekeyvalue".  After 2014.Q2 release, the <li> tag click was causing the selected text range for the editor to get lost.  My fix was to add "unselectable=on" to the <li> tags.  So, I'm assuming the <li> tag was getting selected or getting focus which caused the editor selection range to get lost.  Again, this only applies to IE.

editor.exec("inserthtml", { value: $(keyValue).data("emailnotificationtemplatevariablekeyvalue") });

[Sreekanth]

IE browser issue is not happening in 2015 Q3 release.