Floating toolbatr controlled by user button

[Ian]

Hi,
We're using the RAD Editor in an application where screen space is limited. For that reason we opted to use the 'Show on focus' method of displaying/hiding the editor toolbar as it doesn't require any space at the top of the editor content area.

Unfortunately, on some screens the toolbar obscures other screen content above the editor. If the editor was configured to use the 'Floating' toolbar mode (which allows the toolbar to be re-positioned), is there any way that displaying/hiding the toolbar can be controlled from a custom toggle image or button on the application screen? As part of this approach, we would obviously need to hide the table row at the top of the editor content area that's used for standard editor toggle button.

Thanks, Ian

[Rumen]

Hello Ian Price,

You can customize the code below to achieve your scenario.

The code hides the floating toolbar button and programatically clicks it to show the floating toolbar and position it at a specified position:

<telerik:RadEditor ID="RadEditor1" ToolbarMode="Floating" OnClientLoad="OnClientLoad" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(editor, args) {
      //hide the toggle floating toolbar button
            var button = $telerik.$(".ToggleFloatingToolbar")[0];
            button.parentNode.parentNode.parentNode.style.display = "none";

            if (!$telerik.isIE && button.dispatchEvent) {
                var e = document.createEvent("MouseEvents");

                e.initEvent("click", true, true);
                button.dispatchEvent(e);

            }
            else {
                button.click();
            }
            if ($telerik.$(".rwCloseButton")[0] && $telerik.$("[title='Close']")[0]) {
                $telerik.$(".rwCloseButton")[0].style.display = "none";
            }
            var x = 400, y = 600;
            editor.get_toolAdapter().get_window().moveTo(x, y);

    }
</script>

All the best,
Rumen
the Telerik team

[Ian]

Hi Rumen,
Thanks for your reply - your script really helped. I've now extended the script so that the editor toolbar is intially hidden but can subsequently be shown/hidden by clicking a custom image (which is what I wanted to acheive). I've included the updated script below in case it's of help to others.

        <asp:Image ID="imgShowHideToolbar" runat="server" ImageUrl="~/Images/Toggle.png"/>        
        <telerik:RadEditor ID="RadEditor1" ToolbarMode="Floating" OnClientLoad="OnClientLoad" runat="server">
        </telerik:RadEditor>

        <script type="text/javascript">
            var toolbar = null;
            function OnClientLoad(editor, args) {
                //hide the toggle floating toolbar button
                var button = $telerik.$(".ToggleFloatingToolbar")[0];
                button.parentNode.parentNode.parentNode.style.display = "none";
                
                if (!$telerik.isIE && button.dispatchEvent) {
                    var e = document.createEvent("MouseEvents");
                    e.initEvent("click", true, true);
                    button.dispatchEvent(e);
                }
                else {
                    button.click();
                }                

                if ($telerik.$(".rwCloseButton")[0] && $telerik.$("[title='Close']")[0]) {
                    $telerik.$(".rwCloseButton")[0].style.display = "none";
                }                

                // Save reference to editor toolbar
                toolbar = editor;

                // Position and initially hide the toolbar
                var x = 100, y = 600;
                toolbar.get_toolAdapter().get_window().moveTo(x, y);
                hideToolbar();

                // Add toggle function to image to show/hide toolbar
                $('#imgShowHideToolbar').toggle(function () {
                    showToolbar();
                }, function () {
                    hideToolbar();
                });
            }

            function hideToolbar() {
                toolbar.get_toolAdapter().get_window().hide();
            }

            function showToolbar() {
                toolbar.get_toolAdapter().get_window().show();
            }
        </script>



Best regards, Ian