[Solved] IE + Insert Text at Cursor

[Bashir]

I am writing a toolbar plugin to insert formatted code blocks into the editor region. I want to be able to insert the code blocks at the cursor location. I accomplished this somewhat with the following operation:

$('#EDITOR').data('tEditor').exec('insertHtml', { value: TEXT });

This works perfectly in Chrome and Firefox but I am experiencing an issue with it in IE8. In IE it apparently is resetting the cursor position because my code blocks always end up at the top of the text field instead of the position of the cursor when the toolbar button was pressed. 

I suspect that the spawning of a popup window is encouraging the cursor to jump back to the top of the text field. Is there any work around for the issue? Can I manually read the cursor position before the popup window opens (in which case I can maybe just insert the new HTML fragment at that location in the editor text)?

Thanks.

[Atanas Korchev]

Hi,

 I tried to reproduce this in a sample project to no avail. I am attaching the sample project so you can check it.

Regards,
Atanas Korchev
the Telerik team

[Bashir]

Sorry but I am still getting the issue.

Although your solution works fine for a button it does not work with a Telerik Toolbar popup button in IE (it does work in chrome and Firefox. By works I mean the text gets inserted at the cursor position in Firefox and Chrome but does not get inserted at the cursor position in IE but rather at the top of the text box (I tried IE8 and IE9).

I have managed to reproduce it with your sample by simply adding a toolbar button to your sample that brings up a popup and allows you to insert the text.

the below modification to the index is necessary to reproduce the problem.

Is there some work around for this issue? I am a corporate customer (perhaps I should have sent a support request?) and dont feel comfortable having IE users use this when I know it wont work. 

I believe we can work around the issue if we can read the cursor position before the popup window activates and inert the text at the read position when the button in the popup is pressed. Just a thought. I am sure you guys have encountered this issue before; it is not like I am using the product in a way it wasnt intended.

Thanks.

EDIT: I am willing to help out with this issue in any way I can; I need to get this taken care of soon.

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">
    var TextInsertPopup;

    function insertText(e) {
        e = $.Event(e);
        e.stopPropagation();
        e.preventDefault();

        if (!TextInsertPopup) {
            TextInsertPopup =
                $('<div class="TelerikDialog">' +
                        '<div class="dialogTextArea">' +
                            '<textarea></textarea>' +
                        '</div>' +
                        '<div class="t-button-wrapper">' +
                            '<button id="insertText" class="TelerikDialogButton">' +
                                'Insert' +
                            '</button>' +
                        '</div>' +
                    '</div>')
                .css('display', 'none')
                .tWindow({
                    title: 'Insert Text',
                    modal: true,
                    resizable: true,
                    draggable: true,
                    width: 500,
                    onLoad: function () {
                        $(this).find('#insertText')
                               .click(function () {
                                   var myText = $(TextInsertPopup.element).find('textarea').val();
                                   $('#Editor').data('tEditor').exec('insertHtml', { value: myText });
                                   TextInsertPopup.close();
                               });
                    },
                    effects: $.telerik.fx.toggle.defaults()
                })
            .data('tWindow');
        }
        TextInsertPopup.center().open();
        $(TextInsertPopup.element).find('textarea').focus();
    }
</script>

<h2>@ViewBag.Message</h2>
@(Html.Telerik().Editor()
      .Name("Editor")
      .Tools(tools =>
                tools.Custom(custom => custom.HtmlAttributes(new { onclick = "insertText(event)" })))
      .Value(@<text>
<ul>
    <li>
        One
    </li>
    <li>
        Two
    </li>
    <li>
        Three
    </li>
</ul>
      </text>)
)

<button onclick="return insert()">insert some text at cursor position</button>
<script>
    function insert() {
        var editor = $("#Editor").data("tEditor");
        editor.exec("insertHtml", { value: "test" });
        return false;
    }
</script>

[Alex Gyoshev]

Hello Bashir,

The attached solution should work as expected. Two main problems were addressed:

1. The custom button must have a unselectable="on" attribute, in order to persist the editor selection once the button is clicked.
2. Since you want to edit the text in an textarea, and IE supports only one selection/cursor on the page, you need to save the selection when the dialog opens and restore it before executing the insertHTML command. This is done using the getRange() / selectRange() client-side methods.

Regards,
Alex Gyoshev
the Telerik team

[Bashir]

That solution gets me closer but it still has at least one issue:

The first time you try to insert a text block it works fine. After that if you attempt to insert another text block in a new location the text gets pasted into the location where we inserted the first text block rather than the location where the cursor had been for the second insert.

I modified your project (and attached it) to walk you through the steps for reproducing this problem.

The initialized text in the control has been changed as follows; I also wrapped the toolbar button's output in a <quotebock> tag so the issue is obvious (I have attached a screenshot showing the result)

<h2>@ViewBag.Message</h2>
@(Html.Telerik().Editor()
      .Name("Editor")
      .Tools(tools =>
                tools.Custom(custom => custom.HtmlAttributes(new { @class = "insertText", unselectable = "on", onclick = "insertText(event)" })))
           .Value(@<text>
                       <p>Step #1: Place cusor on the blank line after this line and use the toolbar button to insert some text</p>
                       <br />
                       <p>Step #2: Place cusor on the blank line after this line and use the toolbar button to insert another piece of text. Was the text placed in the right location (the empty line where you had the cursor)?</p>
                       <br />
                   </text>)
)

Hopefully other people will benefit from this as a forum post rather than as an private official support request.

[Alex Gyoshev]

The reason for this behavior is that the range is cached in the JavaScript closure when the popup onLoad handler is created. Refer to the updated Index.cshtml for a work-around.

All the best,
Alex Gyoshev
the Telerik team