This is a migrated thread and some comments may be shown as answers.

Help making a custom EditorTool

1 Answer 9 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 10 Jul 2019, 06:16 PM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 11 Jul 2019, 08:55 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Craig
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or