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

Kendo UI Editor (inline)

9 Answers 160 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Devs
Top achievements
Rank 2
Devs asked on 14 Aug 2013, 05:17 PM
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

9 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 15 Aug 2013, 09:00 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Devs
Top achievements
Rank 2
answered on 15 Aug 2013, 03:06 PM
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.

0
Alex Gyoshev
Telerik team
answered on 16 Aug 2013, 11:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bob
Top achievements
Rank 1
answered on 03 Nov 2014, 02:35 PM
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") });
0
Bob
Top achievements
Rank 1
answered on 03 Nov 2014, 04:39 PM
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.
0
Bob
Top achievements
Rank 1
answered on 03 Nov 2014, 07:57 PM
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.
0
Alex Gyoshev
Telerik team
answered on 05 Nov 2014, 08:22 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 05 Nov 2014, 03:09 PM
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") });
0
Sreekanth
Top achievements
Rank 1
answered on 16 Oct 2015, 07:18 PM
IE browser issue is not happening in 2015 Q3 release.
Tags
Editor
Asked by
Devs
Top achievements
Rank 2
Answers by
Alex Gyoshev
Telerik team
Devs
Top achievements
Rank 2
Bob
Top achievements
Rank 1
Sreekanth
Top achievements
Rank 1
Share this question
or