Multiple Editors with single Toolbar

3 posts, 1 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    Feb 2011

    Posted 15 Apr 2011 Link to this post

    I have a page with several editors and I would like to have a single toolbar to use with all the editors. This toolbar should always be visible.

    I have created a sample page that is CLOSE to what I want. However, the toolbars are being duplicated - one for each RadEditor. I know that I will have to use to javascript change which Editor is active when the toolbar is clicked. That's no problem, though.

    What do I need to change to only have 1 toolbar that's always visible?

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <div style="display: none;">
            <telerik:RadEditor runat="server" ID="MasterEditor" SkinID="DefaultSetOfTools" EnableViewState="false"
                Height="100px" ContentAreaMode="Div">
                <Tools>
                    <telerik:EditorToolGroup DockingZone="divToolbar">
                        <telerik:EditorTool Name="Bold" />
                        <telerik:EditorTool Name="Italic" />
                        <telerik:EditorTool Name="Underline" />
                        <telerik:EditorSplitButton Name="ForeColor" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
        </div>
        <div id="divToolbar" style="background-color: Silver; height: 100px;">
        </div>
        <div>
            <telerik:RadEditor ID="RadEditor1" runat="server" ToolProviderID="MasterEditor" Height="50"
                Width="100" ContentAreaMode="Div" EditModes="Design" EnableViewState="false"
                BorderStyle="None" AutoResizeHeight="True" OnClientLoad="RadEditorLoad" />
        </div>
        <div>
            <telerik:RadEditor ID="RadEditor2" runat="server" ToolProviderID="MasterEditor" Height="50"
                Width="100" ContentAreaMode="Div" EditModes="Design" EnableViewState="false"
                BorderStyle="None" AutoResizeHeight="True" OnClientLoad="RadEditorLoad" />
        </div>
        <script type="text/javascript">
            function RadEditorLoad(editor, args) {
                editor.removeShortCut("InsertTab");
            }
        </script>
  2. Answer
    Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 18 Apr 2011 Link to this post

    Hi Chris,

    You can find attached an example which shows how to implement an always visible single toolbar for multiple editors.


    All the best,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Chris
    Chris avatar
    2 posts
    Member since:
    Feb 2011

    Posted 18 Apr 2011 Link to this post

    Works perfectly! As always, you guys at Telerik are incredible.

    Thanks for your help!

Back to Top