Kendo UI Editor (inline)

10 posts, 0 answers
  1. Devs
    Devs avatar
    2 posts
    Member since:
    Nov 2011

    Posted 14 Aug 2013 Link to this post

    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
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Aug 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Devs
    Devs avatar
    2 posts
    Member since:
    Nov 2011

    Posted 15 Aug 2013 Link to this post

    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.

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Aug 2013 Link to this post

    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!
  6. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 03 Nov 2014 in reply to Alex Gyoshev Link to this post

    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") });
  7. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 03 Nov 2014 Link to this post

    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.
  8. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 03 Nov 2014 in reply to Bob Link to this post

    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.
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Nov 2014 Link to this post

    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!
     
  10. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 05 Nov 2014 in reply to Alex Gyoshev Link to this post

    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") });
  11. Sreekanth
    Sreekanth avatar
    5 posts
    Member since:
    Sep 2014

    Posted 16 Oct 2015 Link to this post

    IE browser issue is not happening in 2015 Q3 release.
Back to Top
Kendo UI is VS 2017 Ready