Rad Editor Tab Issue Bullet Points

8 posts, 1 answers
  1. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2009

    Posted 29 Oct 2009 Link to this post

    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 &nbsp; in the editor 
                 editor.attachEventHandler("onkeydown"function(e) { 
                     if (e.keyCode == '9') { 
                         editor.pasteHtml("&nbsp;&nbsp;&nbsp;&nbsp;"); 
                         if (!document.all) { 
                             e.preventDefault(); 
                             e.preventBubble(); 
                             e.stopPropagation(); 
                         } 
                         else { 
                             e.returnValue = false
                             e.cancelBubble = true
                         } 
                     } 
                 }); 
             } 


    Any help is appreciated...
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 03 Nov 2009 Link to this post

    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.
  3. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2009

    Posted 03 Nov 2009 Link to this post

    Thanks, that seems to have solved the problem!
  4. ranganadh
    ranganadh avatar
    4 posts
    Member since:
    Apr 2011

    Posted 25 Aug 2011 Link to this post

    Its not working if I have the editor with in a UpdatePanel. What we should to use within an asp:UpdatePanel??
  5. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 26 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. ranganadh
    ranganadh avatar
    4 posts
    Member since:
    Apr 2011

    Posted 26 Aug 2011 Link to this post

    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>

  7. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 30 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. ranganadh
    ranganadh avatar
    4 posts
    Member since:
    Apr 2011

    Posted 30 Aug 2011 Link to this post

    THanks, it solved the problem.
Back to Top