Help making a custom EditorTool

2 posts, 1 answers
  1. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 10 Jul 2019 Link to this post

    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?

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14274 posts

    Posted 11 Jul 2019 Link to this post

    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.
Back to Top