Rad Editor Tab Issue Bullet Points

[Alex]

I have a RadEditor set up. Is there a way to insert a sort of five spaces into an area which is a bullet point? Whenever I try to accomplish this it always creates the secondary bullet point and the spaces. I need the line's point to stay the same, but the spaces inserted. Posted below is the editor itself, and the javascript function I've found on the forums to insert five spaces.

editor

                    Product Description: <br />
                    <span style="font-family: Arial; font-size: 12pt;">
                        <telerik:RadEditor id="ProductDescription" runat="server" Width="700px" Height="800px"
                            Skin="WebBlue" ToolsFile="~/Includes/BasicTools.xml" OnClientLoad="OnRadEditorClientLoad"
                            EditModes="All">
                            <SpellCheckSettings AllowAddCustom="true" DictionaryLanguage="en-US" DictionaryPath="~/App_Data/RadSpell" SpellCheckProvider="EditDistanceProvider" />
                            <CssFiles>
                                <telerik:EditorCssFile Value="~/Includes/EditorContentArea.css" />
                            </CssFiles>
                        </telerik:RadEditor>
                    </span>
                    <br />

javascript

         function OnRadEditorClientLoad(editor, args) {
             //attach to the onkeydown event, check whether the tab key is pressed and paste   in the editor
             editor.attachEventHandler("onkeydown", function(e) {
                 if (e.keyCode == '9') {
                     editor.pasteHtml("    ");
                     if (!document.all) {
                         e.preventDefault();
                         e.preventBubble();
                         e.stopPropagation();
                     }
                     else {
                         e.returnValue = false;
                         e.cancelBubble = true;
                     }
                 }
             });
         }

Any help is appreciated...

[Rumen]

Hi Alex,

You should override the InsertTab command of RadEditor, e.g.

<telerik:RadEditor CID="RadEditor1" runat="server"></telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList.InsertTab = function(commandName, editor, oTool)
{
    editor.pasteHtml("&nbsp;&nbsp;&nbsp;&nbsp;");

};
</script>

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alex]

Thanks, that seems to have solved the problem!

[ranganadh]

Its not working if I have the editor with in a UpdatePanel. What we should to use within an asp:UpdatePanel??

[Rumen]

Hi Ranganadh,

Could you please put the JavaScript function inside RadScriptBlock blocks, e.g.

<asp:UpdatePanel ID="Updatepanel1" runat="server">
    <ContentTemplate>
        <telerik:RadEditor ID="RadEditor1" CID="RadEditor1" runat="server">
        </telerik:RadEditor>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                Telerik.Web.UI.Editor.CommandList.InsertTab = function (commandName, editor, oTool) {
                    alert(1);
                    editor.pasteHtml("    ");

                };
            </script>
        </telerik:RadScriptBlock>
    </ContentTemplate>
</asp:UpdatePanel>

See this article for more information: http://www.telerik.com/help/aspnet-ajax/ajax-radscriptblock-radcodeblock.html.

Kind regards,
Rumen
the Telerik team

[ranganadh]

Hello,

Thanks for your reply. It did work if I have an UpdatePanel for the RadEditor and the RadScriptBlock as you have given in the above post.

However, I have the update panel for the whole page, and I will display the RadEditor when the user selects an item in a dropdown control. In this case the script is not getting fired. My page structure is as below. Also I am using master page. Please give your ideas.

<asp:Content ID="Content2" ContentPlaceHolderID="MainPanel" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
         //Here I have RadWindowManager.
         //Severl Div tags with RadDropdown and other controls.
         //ASp Panels and <table> elements.
         //Here at some level I have the Editor.
         <tr>
             <td>
                 <telerik:RadEditor runat="server" ID="rdeLetter" Height="500px" EditModes="Design, Html" ToolsFile="BasicTools.xml" ContentFilters="FixEnclosingP, IECleanAnchors, MozEmStrong, ConvertFontToSpan, ConvertToXhtml, IndentHTMLContent, EncodeScripts" AllowScripts="true">
                     <Content></Content>
                 </telerik:RadEditor>
                 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                     <script type="text/javascript">
                         Telerik.Web.UI.Editor.CommandList.InsertTab = function(commandName, editor, oTool) {
                              alert(1);
                              editor.pasteHtml("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                          };
                     </script>
                  </telerik:RadScriptBlock>
              </td>
          </tr>
          //CLosing of table, and some buttons
          //Finally
      </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

[Rumen]

Hi Ranganadh,

Here is how to solve the problem:
Default.aspx:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="ShowEditor" Text="Show Editor" runat="server" OnClick="ShowEditor_Click" />
        <table>
            <tr>
                <td>
                    <asp:Panel ID="Panel1" runat="server">
                        <script type="text/javascript">
                            if (typeof (Telerik) != 'undefined') {
                                alert(1);
                                Telerik.Web.UI.Editor.CommandList["InsertTab"] = function (commandName, editor, oTool) {
                                    alert(2);
                                    editor.pasteHtml("AAAAA");
                                };
                            }
                        </script>
                    </asp:Panel>
                    <telerik:RadEditor runat="server" ID="rdeLetter" Visible="false" Height="500px" EditModes="Design, Html"
                        ContentFilters="FixEnclosingP, IECleanAnchors, MozEmStrong, ConvertFontToSpan, ConvertToXhtml, IndentHTMLContent, EncodeScripts"
                        AllowScripts="true">
                        <Content></Content>
                    </telerik:RadEditor>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

Default.aspx.cs

protected void ShowEditor_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", @"$telerik.evalScripts($get('" + Panel1.ClientID + "'))", true);

    rdeLetter.Visible = true;
}

Best wishes,
Rumen
the Telerik team

[ranganadh]

THanks, it solved the problem.