Customize Floating Toolbar

2 posts, 0 answers
  1. Benyamin Yabets
    Benyamin Yabets avatar
    10 posts
    Member since:
    Oct 2007

    Posted 18 Apr 2012 Link to this post

    Hello,

    I would like to assign the Floating Toolbar with a behavior similar to the PageTop mode: will open on the top of the page, floating (pinned) by default, but will allow unpin and user reposition as option.
    I set the Toolbar Mode to "Floating" and added the following code in
    OnClientLoad:

    function OnClientLoad(editor, args) {

     

    // Pin the Floating Toolbar

    var wnd = editor.get_toolAdapter().get_window();

    wnd.add_show(function () {wnd.togglePin();});

    // Activate The Toolbar

    editor.get_toolAdapter()._showToolbarHolder(true);

    // Set Focus to the Editor

    editor.setFocus()

    // Move the Floating Toolbar to the Top

    editor.get_toolAdapter().get_window().moveTo(0, 0);

    }
     

    However, it seems togglePin() function prevents the reposition of the Toolbar (Toolbar reposition works fine when togglePin() is commented out), can I integrate both functionalities?

    Also (very different issue), is there a way to make the editor inherit all styles from the location it is opened (assuming div content area is used)? I know I can assign a class that includes all required styles but I would like the styles to be automatically inherited in the editor content area.

    Thanks in advance!

  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 19 Apr 2012 Link to this post

    Hi,

    Straight to the points:

    1) Try the following code:
    Copy Code
    <telerik:RadEditor runat="server" ID="RadEditor1" ToolbarMode="Floating" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            // Pin the Floating Toolbar
            var wnd = editor.get_toolAdapter().get_window();
     
            wnd.add_show(function () {
                    editor.get_toolAdapter().get_window().moveTo(0, 0);
                    wnd.togglePin();
            });
     
            // Activate The Toolbar
            editor.get_toolAdapter()._showToolbarHolder(true);
            // Set Focus to the Editor
            editor.setFocus()
        }
    </script>

    Here is how it works: http://screencast.com/t/Gzdfj2Hh2u5z.

    2) If the CssFiles property is not set, the editor will automatically pick up the styles from the parent page and apply them to its content area as well as populate their names in the Apply Class dropdown. You can read more information in the following article: CSS Styles.

    When the ContentAreaMode property is set to DIV, the content area is rendered as an editable DIV, which is part of the current page. This means that all page styles will be automatically inherited by the content area.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top