RadEditor's DockingZone Work in RibbonBar Mode ?

2 posts, 0 answers
  1. gzzn
    gzzn avatar
    12 posts
    Member since:
    Jan 2011

    Posted 14 May 2012 Link to this post

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormEditorDock.aspx.cs" Inherits="X.Model.GOV.Public.WebFormEditorDock" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
    <title>RadEditor RibbonBar outerdiv Test</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <table width="640px" border="1" style="border-collapse:collapse;">
    <tr><td><div id="outerdiv"></div></td></tr>
    <tr><td><input type="text" runat="server" value="Please Input Title Here ..." style="width:99%;" /></td></tr>
    <tr>
    <td>
    <telerik:RadEditor ID="RadEditor1" runat="server" ToolbarMode="Default" ToolsFile="~/xml/EditorRibbonBarDock.xml" Width="100%">
    <Content>Please Input Text Here ...</Content>
    </telerik:RadEditor>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    when i change ToolbarMode="Default" as ToolbarMode="RibbonBar", it work wrong.

    EditorRibbonBarDock.xml

    <?xml version="1.0" encoding="utf-8" ?>
    <root>
    <tools name="Base" tab="Base" Enabled="true" DockingZone="outerdiv">
    <tool name="PasteStrip" size="large" />
    <tool name="Cut" size="medium" />
    <tool name="Copy" size="medium" shortcut="CTRL+C" />
    <tool name="Print" size="medium" shortcut="CTRL+P" />
    </tools>
    </root>


  2.
  3. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 16 May 2012 Link to this post

    Hello,

    You can achieve the requested ribbonbar in an outer div functionality using the following code:

    <div id="RibbbonBarWrapper" class="RadEditor">
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" ToolbarMode="RibbonBar">
    </telerik:RadEditor>
    <script type="text/javascript">
    function OnClientLoad(editor) {
     $get('RibbbonBarWrapper').appendChild(editor.get_toolAdapter().get_toolsWrapper());
    }
    </script>

    You can also move the RibbbonBarWrapper div to the desired location on the page.


    Regards,
    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