[Solved] Inserting text at the Current Cursor Position

[Jennifer]

I'm new to working with the telerik editor, so this may be a simple issue, but I've yet to find an answer to my problem. I am adding a custom tool to the toolbar. It is a dropdown that I want to be able to insert the text from the drop down into the editor at the current cursor possition (similar to the current functionality of inserting a link), however I haven't found any way to do this in the MVC version of the editor.

I currently have: 

@( Html.Telerik().Editor()
.Name("Editor")
    .Value("Testing Telerik HTML Editor")
    .Tools(tools => tools
            .Custom(settings => settings.Template(@<text>
                @(Html.Telerik().DropDownList()
                    .Name("LanguagesAlso")
                    .Items(items => {
                        items.Add().Text("English").Value("en");
                        items.Add().Text("Spanish").Value("es");
                        items.Add().Text("German").Value("de");
                        .ClientEvents(events => events.OnChange("onLanguageChange")))
                    </text>))
       )
)

<script type="text/javascript">
    function onLanguageChange() {
        $('#Editor').data('tEditor').value('You changed the language to ' + $(this).data('tDropDownList').text());
    }
</script>

This works as far as replacing the text of the editor. What I'm having trouble with is finding what to replace "$('#Editor').data...." with to just insert text into the editor at the current cursor position.

Any help would be appriciated. Thanks.

[Jennifer]

So... I have everything working except getting the cursor position.

function onLanguageChange() {
        var cursorPos = 7

        var editor = $('#Editor').data('tEditor');
        var editorValue = editor.value().substring(0, cursorPos) + $(this).data('tDropDownList').text() + editor.value().substring(cursorPos);
        $('#Editor').data('tEditor').value(editorValue);
    }

Is there any way to get the cursor position, or am I on a wild goose chase?

[Atanas Korchev]

Hello Jennifer,

 You can try the exec method with "insertHtml" as command:

editor.exec('insertHtml', { value: '<strong>Hello World!</strong>' });

Regards,
Atanas Korchev
the Telerik team

[Jennifer]

That... kind of works.

I am running into one problem though. Focus switches from the editor to the drop down. So, when I do the editor.exec(), no matter where the cursor was, it pastes to the beginning of the text.

Is there a way to get around this issue?

My code:

function onLanguageChange() {
        var editor = $('#Editor').data('tEditor');
        editor.focus();
        editor.exec('insertHtml', { value: '<strong>Hello World!</strong>' });
    }

(without the editor.focus(), the page errors out on the editor.exec())

Edit: Or, I suppose more useful in my case - is there a way to keep the editor from losing focus? I've noticed when non custom drop downs are selected, the cursor continues blinking in the editor text area at the cursor position, which is not the case when I select my drop down.

Thanks for your help.

[Atanas Korchev]

Hi Jennifer,

 Which browser are you using? In IE the editor will use focus because that's how IE works. In that case you can try making your dropdown unselectable. If this does not help please provide a sample project so we can check it out.

Regards,
Atanas Korchev
the Telerik team

[Jennifer]

I think that help is on the right track as far as what my problem is, but I'm still having the issue. I'm using IE. I tried my code out in Firefox, Safari, and Opera and it is working as expected.

I'm unable to post a sample project (the .zip is too big and the support ticket won't let me submit for a MVC tool).

I tried creating a new sample project with the following instructions to install: http://www.telerik.com/help/aspnet-mvc/getting-started-using-telerik-extensions-for-asp.net-mvc-in-your-project.html, though changing it to razor

And my .cshtml looks like:

@( Html.Telerik().Editor()
    .Name("Editor")
    .Value("Testing Telerik HTML Editor")
    .Tools(tools => tools
            .Custom(settings => settings.Template(@<text>
                @(Html.Telerik().DropDownList()
                    .Name("Languages")
                    .Items(items => {
                        items.Add().Text("English").Value("en");
                        items.Add().Text("Spanish").Value("es");
                        items.Add().Text("German").Value("de");
                    })
                    .HtmlAttributes(new { onselectstart = "return false", unselectable = "on", style = "-moz-user-select: none; -khtml-user-select: none; user-select: none;" })
                    .ClientEvents(events => events.OnChange("onLanguageChange")))
                    </text>))
       )
)

<script type="text/javascript">
    function onLanguageChange() {
        var editor = $('#Editor').data('tEditor');
        editor.focus();
        editor.exec('insertHtml', { value: $(this).data('tDropDownList').text() });
    }

    function makeUnselectable(node) {
        if (node.nodeType == 1) {
            node.unselectable = true;
        }
        var child = node.firstChild;
        while (child) {
            makeUnselectable(child);
            child = child.nextSibling;
        }
    }
    makeUnselectable(document.getElementById("Languages"));
</script>

And I'm still getting the same issue.

Thank you for your help.

[Atanas Korchev]

Hi Jennifer,

 Which version of IE are you testing in? I tried in IE8 and IE9 and everything worked as expected. Check this video which shows that.

Kind regards,
Atanas Korchev
the Telerik team

[Jennifer]

Atanas,

Thank you for looking into this. I've tested it in IE7 and IE8 and am still running into the same issue.

I appear to be able to post the project now, so if you could take a look and see if you can determine the issue, I would greatly appriciate it.

Thanks,
Jennifer

[Atanas Korchev]

Hi Jennifer,

 Your project is using an older version which may be the problem. Please try using the latest version which is 2011.2 712.

Regards,
Atanas Korchev
the Telerik team

[Jennifer]

Yep, looks like my issue was fixed in the latest version.

Thank you for your help.

[Juan]

the lastest version (2011.3.1115) will not work in IE 8,9. version 2011.2 712 will work.

[Hao]

We're having the same issue with version 2012.2.607. Is there a solution/work around? It's a blocker for us.

[Atanas Korchev]

Hello,

 We are not aware of such a regression. Could you provide some steps to reproduce this issue?

Regards,
Atanas Korchev
the Telerik team

[Hao]

Attached is the repro project. The telerik version is 2012.2.607.340. Click "Insert Text" you will see the text is inserted at the start no matter where the cursor is.

[Hao]

BTW,  I tested with IE9 on Windows7.

[Hao]

Have you tried the repro? Any updates?

[Alex Gyoshev]

Hello Jennifer,

You need to set unselectable=on to the HTML elements of the toolbar items. A simple snippet to do this is this:

    $(document).ready(function() {
        $("#editor .t-custom *").attr("unselectable", "on");
    });

All the best,
Alex Gyoshev
the Telerik team

[Hao]

This does not work if the custom tool brings up a dialog and user inputs data there. Attached is a repro. Click the last icon on the toolbar and a dialog is displayed. Type something in the text box and close the dialog. "Foo" is inserted at the front of the editor regardless of what the cursor was before.

This is a regression from 2011.2.712.

[Alex Gyoshev]

Yes, you need to manually restore the selection to the editor. The code that was enabling this functionality automatically caused bugs in many situations, so it was removed. If you get the editor range when the dialog is opening and restore it when the command finishes, the problem will disappear. I'm attaching the modified project.

Kind regards,
Alex Gyoshev
the Telerik team