Paragraph Style is not adding the class attribute to paragraphs

[shadow]

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??

[Stanimir]

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

[shadow]

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);
            }
        }

[Stanimir]

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

[shadow]

<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.

[Stanimir]

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

[shadow]

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.