Completed
Last Updated: 07 Jun 2016 11:20 by ADMIN
ADMIN
Ianko
Created on: 21 Feb 2014 07:14
Category: UI for ASP.NET AJAX
Type: Feature Request
0
Improve: When a table is inserted in the content, the cursor should be placed in the first TD element
The current behavior of the table insertion works by adding the cursor outside the table. This behavior causes inconsistent issues (e.g. In IE the cursor appears in the last TD, but the typed text is after the table) and faulty user experience.

In desktop rich text editors (e.g. MS Word), when a table is inserted the first table cell is selected and this is the users' expected behavior.

You can test the modified command by following this example:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>

<script type="text/javascript">
    var identifierID = "RadEditor_AfterTable";

    function OnClientPasteHtml(editor, args) {
        var commandName = args.get_commandName();

        if (commandName === "InsertTable" || commandName === "TableWizard" ) {
            var currValue = args.get_value();
            currValue = currValue.replace(/<\/table>/gi, "</table><div id=" + identifierID + ">&#x200B;</div>");
            //currValue = currValue + "<div id=" + identifierID + ">&#x200B;</div>";
            
            args.set_value(currValue);
            setTimeout(function () {
                selectFirstTD(editor)
            }, 0);
        }
    }

    function selectFirstTD(editor) {
        var $ = $telerik.$;
        var contBody = editor.get_contentArea();
        var identifier = $(contBody).find("#" + identifierID);
        var table = identifier.prev();
        var elmToSelect = table.find("th")[0] || table.find("td")[0];

        if (elmToSelect.childNodes && !$telerik.isIE) {
            elmToSelect = elmToSelect.childNodes[0].nodeName === "#text" && elmToSelect.childNodes[0];
        }

        var hasNextElement = identifier.next()[0];
        
        while (hasNextElement && $(hasNextElement).is("style")) {
            hasNextElement = $(hasNextElement).next()[0];
        }
        
        editor.selectElement(elmToSelect);

        if (!hasNextElement) {
            table.after("<br/>");
        }

        identifier.remove();
    }
</script>
0 comments