Help making a custom EditorTool

[Craig]

I'm trying to come up with a way to create a custom EditorTool that is purely informational.  Essentially, I want a label in the Ribbon that I can update the text with JavaScript.  I can get way with having a normal EditorTool as long as I can keep updating the text on the fly from client-side.  The issue is that the users are spending more time in the editor than the established timeout on the server (I have no control over the timeout length). I'm looking to give them a counter that shows how long before the timeout will occur (I've got a counter written, but nowhere to display it).  Ideally they'd be saving as they worked, and it wouldn't be a problem... but users don't always do what they should. lol

 

Alternatively, I could just auto-save for them, but I'd still want to be able to modify the text in the Ribbon to indicate when that occurred.

 

I don't want to have to waste real estate to add a label above or below the editor when the existing ribbon has plenty of unused space.

 

Any suggestions?

[Rumen]

Hi Craig,

Thank you for the interesting scenario!

Since there isn't a built-in way to set a label over the toolbar, you can use the following trick to achieve it. 

You can use the code below to put a div label before a custom dropdown of RadEditor on the toolbar and after that hide the custom dropdown:

<div id="Timer" style="width:100px; border:1px solid red;">123 seconds</div>
 <telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" ToolbarMode="RibbonBar">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
            <telerik:EditorDropDown Name="CustomLabel" width="150px" />
            <telerik:EditorTool Name="LinkManager" />
        </telerik:EditorToolGroup>
    </Tools>
 </telerik:radeditor>
<script type="text/javascript">
function OnClientLoad(editor)
{
    //get a reference to the div timer
    var timerLabel = $get("Timer");

    //get a reference to the custom dropdown tool and its parent element
    var customDropdown = editor.getToolByName("CustomLabel").get_element();
    var parentCustomTool = customDropdown.parentNode;

    //insert the timer label before the custom dropdown
    parentCustomTool.insertBefore(timerLabel, customDropdown);
    //hide the custom dropdown
    customDropdown.style.display = "none";
}
</script>

Regards,
Rumen
Progress Telerik