RadEditor Inline EditMode Trigger Editing on Load

[Joshua Swain]

I am looking for, if it is possible, to trigger the editing of a RadEditor on load, that is in Inline Edit Mode.  The user clicking into the editable area of the RadEditor triggers the editing, showing the cursor and the toolbar.  I want to have this functionality, but on load.

I have tried several different javascript triggers/onclicks/focus of different elements within the RadEditor, and even the RadEditor itself.  I have tried putting all these things inside of timeouts, so that happen latter in the DOM lifecycle.  All without effect.

The closest thing I have been able to accomplish is showing the cursor inside the window by using the following javascript/jquery:

$(editor.get_contentArea()).focus();

This of course doesn't trigger the actual editing, as the toolbar doesn't show, nor does clicking out fire the "OnClientInlineEditCompleted" event.

I hope someone has some ideas on how I might accomplish this functionality.

Thanks,

Josh

[Rumen]

Hi Josh,

Here is an example on how to set the focus in inline edit mode:

<script>
    function OnClientLoad(editor, ags) {

            setTimeout(function () {
                editor.get_contentArea().focus();
                editor.pasteHtml("");
            }, 1000);

    }
</script>
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
    <Content>
<h2>Responsive Web Design</h2>
With <a href="http://www.telerik.com/products/aspnet-ajax.aspx">Telerik UI for ASP.NET AJAX</a> you can build applications that deliver tailored user experiences for any screen.
<a href="http://demos.telerik.com/responsive-web-design-aspnet/default.aspx">Mobile and Responsive</a> web application, optimized for
mobile, is your go-to resource for learning and testing the mobile
capabilities within the UI controls and frameworks offered in the suite.<br/><br/>
<h3>Percentage of People Accessing the Web From Mobile Devices</h3>
<img alt="Percentage of People Accessing the Web From Mobile Devices" src="images/device-percentage.png" style="max-width: 100%;" />
<em>Stats belong to <a href="http://www.emarketer.com/Article/Middle-East-Africa-Nearly-All-Web-Users-Mobile/1010507/2">eMarketer</a> (January 2014) </em>
    </Content>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik

[Joshua Swain]

Rumen,

Thanks for the help.  That worked great, and made the toolbar pop up.

The one problem I am having is that If I don't click on anything within the control, and I just type.  Then I click elsewhere, the "OnClientInlineEditCompleted" doesn't fire.  Does this event only get added to the stack if something in the control is clicked by a user?

 

Thanks,

Josh

[Rumen]

Hi Josh,

The OnClientInlineEditCompleted event is fired after the completion of inline editing (i.e., clicking outside of the content area of an editor with enabled inline-editing). I tested the latest version with the code below and the The OnClientInlineEditCompleted event and I verified that the OnClientInlineEditCompleted event is firing after clicking outside of the content area as shown in the attached video:

        <div style="height: 500px"></div>
        <script>
            function OnClientLoad(editor, ags) {

                setTimeout(function () {
                    editor.get_contentArea().focus();
                    editor.pasteHtml("");
                }, 1000);

            }

            function OnClientInlineEditCompleted(sender) {
                alert("The OnClientInlineEditCompleted event is fired after the completion of inline editing (i.e., clicking outside of the content area of an editor with enabled inline-editing)");
            }
        </script>
        <telerik:RadEditor RenderMode="Lightweight" OnClientInlineEditCompleted="OnClientInlineEditCompleted" runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
            <Content>
<h2>Responsive Web Design</h2>
With <a href="http://www.telerik.com/products/aspnet-ajax.aspx">Telerik UI for ASP.NET AJAX</a> you can build applications that deliver tailored user experiences for any screen.
<a href="http://demos.telerik.com/responsive-web-design-aspnet/default.aspx">Mobile and Responsive</a> web application, optimized for
mobile, is your go-to resource for learning and testing the mobile
capabilities within the UI controls and frameworks offered in the suite.<br/><br/>
<h3>Percentage of People Accessing the Web From Mobile Devices</h3>
<img alt="Percentage of People Accessing the Web From Mobile Devices" src="images/device-percentage.png" style="max-width: 100%;" />
<em>Stats belong to <a href="http://www.emarketer.com/Article/Middle-East-Africa-Nearly-All-Web-Users-Mobile/1010507/2">eMarketer</a> (January 2014) </em>
            </Content>
        </telerik:RadEditor>

Regards,
Rumen
Progress Telerik