Customize Floating Toolbar

[Benyamin Yabets]

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!

[Rumen]

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