Inline styles being generated from Paragraph styles

[Kirsty]

Hi there,

We have upgraded our RAD Editor to v 5.7.3.0 and are having some problems with the paragraph styles. This was not happening prior to upgrading. We are using IE 8 browser.

There are no problems applying the paragraph styles (H1, H2 etc), however, if we make some text H1 for instance, then change it  back to Normal, inline styles are inserted into the code which then affects the use of the CSS styles within RAD Editor.

To better demonstrate, here is an example...

I have created 2 paragraphs in the Design part of the RAD Editor and here is what is displayed in the HTML part:
<p>This is paragraph one</p>
<p>This is paragraph two</p>

Now I apply Heading 1 paragraph style to the first paragraph. This is what is displayed in the HTML part:
<h1>This is paragraph one</h1>
<p>This is paragraph two</p>

So far, this all looks correct. Now I want to remove Heading 1 from paragraph 1, so I select Normal as the paragraph style. This is what happens in the HTML:
<p style="margin-top: 0pt; font-weight: normal; font-size: 9pt; margin-bottom: 10pt; color: #000000; font-style: normal; font-family: verdana; font-variant: normal;">This is paragraph one</p>
<p>This is paragraph two</p>

From here, any CSS styles applied to the whole paragraph do not work. The CSS styles are inserted as a class, however the inline style overides the class style. For example:
<p class="bold" style="margin-top: 0pt; font-weight: normal; font-size: 9pt; margin-bottom: 10pt; color: #000000; font-style: normal; font-family: verdana; font-variant: normal;">This is paragraph one</p>
<p>This is paragraph two</p>

However, if CSS styles are applied to parts of the paragraph it does work.

Would you have any suggestions as to why inline styles are being inserted?

Thanks! Kirsty

[Stanimir]

Hello Kirsty,
Unfortunately I was not able to reproduce the issue. I did not get the described styling after changed H1 to normal formatting. For your convenience I attache a small video with my test.

In order to help you further I will need some additional information. Provide me with a small video or a couple of screen shots, where I can see the problem. Also write in what scenario are you using the control. Is it WCM, webpart or list(wiki, blog...)?

Sincerely yours,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kirsty]

Hi Stanimir,

I couldn't produce the same thing in your "demo" product on your website either. I have attached some screen shots for you - unfortunately I wasn't able to create a video. Regarding the scenario, the issue is occuring in the page layout, in web parts and in lists. It also happens in both IE6 and IE8. I haven't tested any other browsers.

If there is any further information I can provide, please let me know.

Kind regards,
Kirsty

[Kirsty]

Sorry, files are attached...

[Stanimir]

Hi Kirsty,

Thank you for the provided screen shots. They were helpful indeed. Actually this is how RadEditor behaves by design. When the FormatBlock command is executed it changes the tags from one tag to another (from P to H1 for example) and keeps the styling of the elements.

Here is what you can do if you want to remove the style attributes of the formatted elements when this command is executed.

1. Add the following element in the respective ConfigFile.xml and ListConfigFile.xml, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder.

<property name="OnClientCommandExecuting">OnClientCommandExecuting</property>

2. Add the following javascript methods to the MOSSEditorTools.js, which is located in the mentioned above folder.

function OnClientCommandExecuting(editor, args)
{
    if (args.get_commandName() == "FormatBlock")
    {
        var selectedElement = editor.getSelectedElement();
        if (selectedElement)
        {
            stripNodeStyleFormatting(selectedElement);
        }
    }
}

function stripNodeStyleFormatting(node)
{
    if (!node) return;
    if (typeof(node.tagName) != "undefined")
    {
        switch (node.tagName)
        {
            //here you can add more tag names
            case "P":
            case "H1":
            case "H2":
            case "H3":
            case "H4":
            case "H5":
            case "H6":
                node.style.cssText = "";
                break;
        }
        var childNodes = node.childNodes;
        for (var i = 0, l = childNodes.length; i < l; i++)
        {
            stripNodeStyleFormatting(childNodes[i]);
        }
    }
}

Best wishes,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kirsty]

Hi Stanimir,
Thanks for your reply. I have inserted the code into the respective files as per your instructions. This works to some degree, but hasn't completely solved the problem.

Scenario 1: If I click on the text (do not highlight) and change the paragraph style, the inline styles are stripped. - Desired result
Scenario 2: If I highlight the text and change the paragraph style, the inline styles remain as per previous screen shots.

I have attached a copy of the Config file and ListConfig file - hope this helps :)
Kind regards, Kirsty

ConfigFile.xml

<?xml version="1.0" encoding="utf-8" ?>
<!-- ==============================================================================================
    Config File valid structure:
    <configuration>
    <property>...</property>
    ...
        <property>
            <item>...</item>
            <item>...</item>
            ...
        </property>
        ...
    </configuration>
=============================================================================================== -->
<configuration>
  <property name="AllowThumbGeneration">True</property>
  <property name="ConvertToXhtml">True</property>
  <property name="EnableDocking">False</property>
  <property name="ShowHtmlMode">True</property>
  <property name="ShowPreviewMode">False</property>
  <property name="StripAbsoluteAnchorPaths">False</property>
  <property name="StripAbsoluteImagesPaths">False</property>
  <property name="ToolbarMode">ShowOnFocus</property>
  <property name="ToolsWidth">500px</property>
  <property name="Skin">Outlook</property>
  <property name="CssFiles">
 <item>/_wpresources/RadEditorSharePoint/5.7.3.0__1f131a624888eeed/RadControls/Editor/CssEditor.css</item>
    </property>
  <property name="NewLineBr">False</property>
  <property name="SpellDictionaryLanguage">en-AU</property>
  <property name="StripFormattingOnPaste">MSWordRemoveAll,Span,Font</property>
  <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.7.3.0__1f131a624888eeed/Resources/EditorDialogs</property>

  <property name="OnClientCommandExecuting">OnClientCommandExecuting</property>
</configuration>

ListConfigFile.xml

<?xml version="1.0" encoding="utf-8" ?>
<!-- ==============================================================================================
    Config File valid structure:
    <configuration>
    <property>...</property>
    ...
        <property>
            <item>...</item>
            <item>...</item>
            ...
        </property>
        ...
    </configuration>
=============================================================================================== -->
<configuration>
  <property name="ConvertToXhtml">true</property>
  <property name="EnableDocking">False</property>
  <property name="ShowPreviewMode">False</property>
  <property name="StripAbsoluteAnchorPaths">False</property>
  <property name="StripAbsoluteImagesPaths">False</property>
  <property name="Height">240px</property>
  <property name="Width">500px</property>
  <property name="Skin">Outlook</property>
  <property name="CssFiles">
    <item>/_wpresources/RadEditorSharePoint/5.7.3.0__1f131a624888eeed/RadControls/Editor/CssEditor.css</item>
  </property>
  <property name="NewLineBr">False</property>
  <property name="StripFormattingOnPaste">MSWordRemoveAll,Span,Font</property>
  <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.7.3.0__1f131a624888eeed/Resources/EditorDialogs</property>

  <property name="OnClientCommandExecuting">OnClientCommandExecuting</property>
</configuration>

[Stanimir]

Hello Kirsty,

Unfortunately I was not able to reproduce the problem. In my test the style formatting is removed regardless of the selection. Provide me with a small video or a couple of screen shots so I will be able to see the issue.

Regarding the configuration files you should know that the following properties are obsolete:
AllowThumbGeneration, ConvertToXhtml, EnableDocking, ShowHtmlMode, ShowPreviewMode, StripAbsoluteAnchorPaths, StripAbsoluteImagesPaths

Greetings,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kirsty]

Hi Stanimir,

Thanks for your update on the config files. We have now installed 5.8.0.0 and have reconfigured the config and tool files to ensure we aren't using obselete items. In doing so, we have discovered what was causing the inline styles to be generated. In ToolsFile.xml, we had inline CSS styles inserted into the paragraph tag to get the CSS styles to appear on the items in the drop down list. It appears that this was not required. Our server just needed some time to apply the CSS to the drop down menu. All is working.

Below is the solution that worked for us:

<paragraphs>
   <paragraph name="<H1>Heading 1</H1>" value="<H1>" />
   <paragraph name="<H2>Heading 2</H2>" value="<H2>" />
   <paragraph name="<H3>Heading 3</H3>" value="<H3>" />
   <paragraph name="<H4>Heading 4</H4>" value="<H4>" />
   <paragraph name="<H5>Heading 5</H5>" value="<H5>" />
   <paragraph name="<H6>Heading 6</H6>" value="<H6>" />
   <paragraph name="<p>Normal</p>" value="<p>" />
</paragraphs>