Paragraph Style is not adding the class attribute to paragraphs

7 posts, 1 answers
  1. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 03 Apr 2013 Link to this post

    Hello,

    I am adding the paragraph styles to the RadEditor with the following code

    RadEditor1.Paragraphs.Add("<H1 class='header1'>My (H1)<H1>", "<H1 class='header1'>")

    These styles appear in the select list in RadEditor. When I apply some paragraph style, it add the correct "tag" but not adding the "class" attribute.

    Such as:

    <h1> Text goes here.. </h1>

    While I am expecting:
    <h1 class='header1'> Text goes here.. </h1>



    I have followed the following url's
    http://www.telerik.com/help/aspnet-ajax/editor-paragraph-styles.html
    http://demos.telerik.com/aspnet-ajax/editor/examples/formatblock/defaultcs.aspx

    Can anyone help me??
  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 05 Apr 2013 Link to this post

    Hello,

    Actually I was not able to reproduce the problem on our side. For you convenience I created a small video where you can see my test: http://screencast.com/t/iXh9qZUkCi. Please confirm, If I am doing anything incorrect in order for me to reproduce the issue.

    In order to able to help you further I need some additional information. A step by step scenario or a simple aspx sample page where the problem exists will be of great help.

    Also could you confirm exactly which version of RadControls for ASP.NET AJAX are you using?

    Thank you.

    Greetings,
    Stanimir
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 05 Apr 2013 Link to this post

    Hello,

    Please have a look on the video: http://screencast.com/t/5gN3Nzot

    Problem is that, if we select the text to apply paragraph style it just adds the tag (no style), on the other side if we just click in the paragraph (without selecting any text) it applies the tag and style to whole paragraph.

    Version : 2012.3.1016.40

    We are adding the editor to page from code behind class.

    This how we configure our editor in code behind

            /// <summary>
            ///
            /// </summary>
            /// <param name="Editor"></param>
            /// <remarks></remarks>
            private void SetEditorProperties(ref Telerik.Web.UI.RadEditor Editor, int LanguageId)
    {
      Editor.Width = new System.Web.UI.WebControls.Unit("100%", CultureInfo.InvariantCulture);
                Editor.Height = 0;
                Editor.AutoResizeHeight = true;
     
                Editor.ToolbarMode = Telerik.Web.UI.EditorToolbarMode.PageTop;
                Editor.ContentAreaMode = EditorContentAreaMode.Div;
                Editor.BackColor = System.Drawing.Color.Transparent;
                //Editor.StripFormattingOnPaste = Telerik.Web.UI.EditorStripFormattingOptions.MSWordRemoveAll;
                Editor.StripFormattingOptions = EditorStripFormattingOptions.MSWordRemoveAll;
     
                Editor.ToolsFile = "/Modules/HtmlArticle/ToolsFile.xml";
                InternalLinks EditorLinks = new InternalLinks();
                Editor = EditorLinks.LoadLinks(Editor);
                Editor = CSSClass.LoadCSSToParagraphList(Editor);
                Editor.CssClasses.Clear();
                Editor.CssFiles.Clear();
                Editor.CssFiles.Add("/pub/css/default.css");
                Editor.CssClass = "HtmlArticle_articleEditors";
     
     
                Editor.Skin = "Sitefinity";
                Editor.ExternalDialogsPath = "/Modules/EditorDialogs/";
     
                string[] ImagesPath = { "Files/bilder" };
                string[] ImagesUploadPath = { "/" };
                ImageManagerDialogConfiguration Config = new ImageManagerDialogConfiguration();
                Config.ContentProviderTypeName = typeof(ContentProviderHandler).AssemblyQualifiedName;
                Config.EnableImageEditor = true;
                Config.ViewPaths = ImagesPath;
                Config.DeletePaths = ImagesPath;
                Config.UploadPaths = ImagesPath;
     
                FileManagerDialogConfiguration Config2 = new FileManagerDialogConfiguration();
                Config2.ContentProviderTypeName = typeof(ContentProviderHandler).AssemblyQualifiedName;
                Config2.ViewPaths = ContentProviderCommonOperations.ContentProviderPath;
                Config2.DeletePaths = ContentProviderCommonOperations.ContentProviderPath;
                Config2.UploadPaths = ContentProviderCommonOperations.ContentProviderPath;
     
                FileManagerDialogConfiguration Config3 = new FileManagerDialogConfiguration();
                Config3.ContentProviderTypeName = typeof(ContentProviderHandler).AssemblyQualifiedName;
                Config3.ViewPaths = ContentProviderCommonOperations.ContentProviderPath;
                Config3.DeletePaths = ContentProviderCommonOperations.ContentProviderPath;
                Config3.UploadPaths = ContentProviderCommonOperations.ContentProviderPath;
                Config3.SearchPatterns = new string[] { "*.*" };
     
                Editor.ImageManager = Config;
                Editor.FlashManager = Config2;
                Editor.DocumentManager = Config3;
     
     
     
                //make sure that the tools file is loaded
                Editor.EnsureToolsFileLoaded();
     
                //add context menus.
                this.AddContextMenuToEditor(ref Editor);
    }
     
          /// <summary>
            ///
            /// </summary>
            private void AddContextMenuToEditor(ref Telerik.Web.UI.RadEditor Editor)
            {
                //clear default context menus collection
                Editor.ContextMenus.Clear();
     
                //Create a draft editor tool.
                EditorTool SaveDraftTool = new EditorTool();
                SaveDraftTool.Text = "Spara utkast";
                SaveDraftTool.Name = "SaveDraft" + this.ContentItemId.ToString(); //creating a unique command name so that correct article draft is saved.
     
                EditorTool DeleteDraftTool = new EditorTool();
                DeleteDraftTool.Text = "Redeara utkast";
                DeleteDraftTool.Name = "DeleteDraft" + this.ContentItemId.ToString(); //creating a unique command name so that correct article draft is saved.
     
                //add draft commands as context menu to editor
                EditorContextMenu forDIV = new EditorContextMenu();
                forDIV.TagName = "DIV";
                forDIV.Tools.Add(SaveDraftTool);
                forDIV.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forDIV);
     
                EditorContextMenu forP = new EditorContextMenu();
                forP.TagName = "P";
                forP.Tools.Add(SaveDraftTool);
                forP.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forP);
     
                EditorContextMenu forImg = new EditorContextMenu();
                forImg.TagName = "IMG";
                forImg.Tools.Add(new EditorTool("ImageMapDialog")); //Image map context menu
                forImg.Tools.Add(SaveDraftTool);
                forImg.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forImg);
     
                EditorContextMenu forA = new EditorContextMenu();
                forA.TagName = "A";
                forA.Tools.Add(SaveDraftTool);
                forA.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forA);
     
                EditorContextMenu forH1 = new EditorContextMenu();
                forH1.TagName = "H1";
                forH1.Tools.Add(SaveDraftTool);
                forH1.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forH1);
     
     
                EditorContextMenu forSpan = new EditorContextMenu();
                forSpan.TagName = "SPAN";
                forSpan.Tools.Add(SaveDraftTool);
                forSpan.Tools.Add(DeleteDraftTool);
                Editor.ContextMenus.Add(forSpan);
     
                this.AddContextMenuCommandScript();
     
                string CustomCommandsCssStyle = "<style type=\"text/css\"> ." + SaveDraftTool.Name + " { background-image: url('/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png') !important; } </style>";
                string CustomCommandsCssStyle2 = "<style type=\"text/css\"> ." + DeleteDraftTool.Name + " { background-image: url('/Modules/HtmlArticle/images/wysiwyg/icons/save-draft.png') !important; } </style>";
     
     
                System.Web.UI.Page LoadedWebPage = (System.Web.UI.Page)HttpContext.Current.Handler;
                if (!LoadedWebPage.ClientScript.IsStartupScriptRegistered("savedraftandDeletedraftCss" + base.ContentItemId.ToString()))
                {
                    LoadedWebPage.ClientScript.RegisterStartupScript(this.GetType(), "savedraftandDeletedraftCss" + base.ContentItemId.ToString(), CustomCommandsCssStyle);
                    LoadedWebPage.ClientScript.RegisterStartupScript(this.GetType(), "savedraftandDeletedraftCss2" + base.ContentItemId.ToString(), CustomCommandsCssStyle2);
                }
            }

  5. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 10 Apr 2013 Link to this post

    Hello Farid,

    I still am not able to reproduce the issue. Could you send me the ToolsFile.xml, which you are setting in the provided code. In addition could you confirm in which browser you are experiencing the problem.

    One more thing. In your code I can see that you are setting the ContentAreaMode of the editor to DIV. Could you check if you will experience the problem if the content area is IFRAME?


    All the best,
    Stanimir
    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.
  6. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 11 Apr 2013 Link to this post

    <root
        <tools>
            <tool name="Paste"/>
             
            <tool separator="true"/>
            <tool name="Undo"/>
            <tool name="Redo"/>
            <tool separator="true"/>
            <tool name="ImageManager"/>    
            <tool name="InsertTable"/>
        <tool name="InsertExternalVideo"/>
            <tool separator="true"/>
            <tool name="LinkManager"/>
            <tool name="Unlink"/>
            <tool name="InsertSymbol"/>
        </tools>
        <tools>
            <tool name="Bold"/>
            <tool name="Italic"/>
            <tool name="Underline"/>
            <tool separator="true"/>
            <tool name="JustifyLeft"/>
            <tool name="JustifyCenter"/>
            <tool name="JustifyRight"/>
            <tool name="JustifyFull"/>
            <tool separator="true"/>
            <tool name="InsertOrderedList"/>
            <tool name="InsertUnorderedList"/>
            <tool name="Outdent"/>
            <tool name="Indent"/>
            <tool separator="true"/>               
        </tools>
        <tools>
            <tool name="FontName"/>
            <tool name="FontSize"/>
            <tool name="ForeColor"/>
            <tool name="BackColor"/>
            <tool name="FormatBlock"/>
            <tool name="InsertCustomLink"></tool>
        </tools>
        <links>
     
        </links>
    </root>

    Above is the tool file.
    We are facing this problem in Chrome and IE, we have not tested this with other browser, our application is mainly for these browsers.

    I have tried with setting the ContentAreaMode to Iframe, still no effect. I want to notify here that we are aiming to use the Div mode.
  7. Answer
    Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 17 Apr 2013 Link to this post

    Hi,

    In your previous post you mention that the version Telerik.Web.UI, which you are using is 2012.3.1016.40.
    I beleive there were some changes made in the last two releases to the Format Block command. Currently I can not reproduce the problem with the latest version. So what I suggest you is to upgrade the RadControls for ASP.NET AJAX and check if the problem will persist.

    Regards,
    Stanimir
    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.
  8. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 15 May 2013 Link to this post

    Ok, We haven't decided yet to update the telerik version.
    Problem is still there.
    I will post here if we get the problem after updating the telerik. For now we have decided to live with this problem.

    Thanks for you suggestions.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017