Upgrade messes up html

[claudz]

Hi Telerik,

We have just upgraded from Telerik RadEditor version 4.5.0.0 to version 5.8.0.0.

After the upgrade, the new version has changed the html of some existing pages (where content was originally added using RadEditor version 4.5.0.0). For example, on some pages, loads of " " have appeared in the code, and when trying to edit existing content to remove or "fix" up the changed html, often the changed html reappears after checking the page in.

Here's an example of some content in a web content management scenario, i.e. an embedded radeditor control:

<p><a href="http://www.legislation.qld.gov.au/LEGISLTN/CURRENT/E/EnvProtR08.pdf" target="_blank">Environmental Protection Regulation 2008</a> </p>
</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Chapter 7 - Administration, Part 1 - Devolution, Part 2 - Enforcement. </p>

The 3 lines containing <p>&nbsp;</p> were somehow added after the upgrade and are not meant to be there.

If I go in and edit the content, removing each <p>&nbsp;</p> and then click Check In To Share Draft on the page, instead of removing those 3 lines, the spaces reappear.

Any ideas as to why this might be happening? Other strange things that happen include radeditor inserting random <p> tags, shifting/adding <span> tags, text going bold for some reason when a change is made, <tr></tr> tags changing into <tr /> and <td></td> changing into <td />.

We are using MOSS 2007 and IE8.

Thanks,
Claudz

[Rumen]

Hi Claudz,

You can experience the extra empty <p> tags problem only if you edit non well formed HTML content and switch between the Html and Design modes of RadEditor or when submitting the content.

The Rich Text Editing engine of the browser that RadEditor's content area IFRAME uses, tries to validate the non well formed content and the <p> tags in it but without success and produces new non valid XHTML content.

This invalid XHTML content misleads the ConvertToXhtml content filter of RadEditor and the editor starts to produce extra paragraphs with every switch between Html and Design mode or when submitting the content. To stop this behavior you can disable the ConvertToXhtml filter by setting the ContentFilters property in the respective ConfigFile.xml and ListCoifgFile.xml files, 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="ContentFilters">RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,IndentHTMLContent</property>

The ConvertToXhtml filter should not be set as a value.

The <span> tags could be due to the ConvertFontToSpan filter. Disable this filter too and see whether the problem still persists.

Sincerely yours,
Rumen
the Telerik team

[claudz]

Thanks Rumen,

That has helped. The pages are keeping their fixes now.

However, there was another little issue that users have been noticing. I'm not sure if it is related.
What happens is that when there is a long page and the user wants to edit text towards the bottom of the page, a few seconds after they place their cursor, the focus jumps back up to the top of the page when the toolbar appears (the toolbar is set to "Show on Focus" in the Config file). The focus is not kept at the cursor where the user clicked down at the bottom.

Is there any way to ensure that the focus is kept on the cursor location when the toolbar appears?

Thanks,
Claudz

[Rumen]

Hi Claudz,

Do you experience this problem with the Default toolbar? Which is the browser where the problem is reproducible? Does the problem happen with a specific HTML content only. If so, could you please send it for examination?

Such problem was reported for Internet Explorer and it is hard for reproducing. The problem was reported by a few users only and it appears when at least one of the following conditions is met:

• There is a css filter:alpha(opacity=30); imported in the content area of RadEditor
• There is an <asp:Timer> control on the page
• the DOCTYPE is not set
• There is a font css property set in percents - this condition was reported by a customer but not reproduced.
• Non XHTML DOCTYPE is used along with this meta tag: <meta http-equiv="Page-Enter" content="RevealTrans(Duration=0,Transition=0)" />

Best regards,
Rumen
the Telerik team

[claudz]

Hi Rumen,

I set the ToolsFile, ListToolsFile, ConfigFile and ListConfigFile back to the default settings. I then tried to see if I could reproduce the problem, which I was able to. The cursor still jumps to the top.

The browser that we are running is Internet Explorer 8 (Version 8.0.6001.18702CO).

The problem occurs with all sorts of HTML content. For example, I tried a page where I typed the text Hello Hello Hello many many times to create a long page. No formatting or styles were applied. In the html view, I ensured that there were no tags, only the words Hello. I then Published the page. Afterwards I clicked on Site Actions > Edit Page, and then in the RadEditor, scrolled down to the last line and clicked my cursor there, at which the cursor jumped towards the top of the RadEditor when the toolbar appeared.

Something that I noticed though which is worth mentioning is that the cursor only jumps up the first time a user clicks inside the RadEditor field (i.e. after Site Actions > Edit Page when the toolbar comes into focus for the first time during an edit page session).

Any times after that, when a user is working on the page, the cursor is placed correctly and stays in its position, even if the toolbar's focus comes on and off during that edit page session.

However, once the page is Published and a user comes back to edit again, the issue reoccurs, but again only the first time the toolbar comes into focus.

Hope that makes sense.

Below is the code for the following files:

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="ToolbarMode">ShowOnFocus</property>
    <property name="ToolsWidth">600px</property>
        <property name="AllowThumbGeneration">True</property>
        <property name="ContentFilters">RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,IndentHTMLContent</property>
        <property name="EnableDocking">True</property>
        <property name="StripAbsoluteAnchorPaths">False</property>
        <property name="StripAbsoluteImagesPaths">False</property>
        <property name="Skin">Outlook</property>
        <property name="CssFiles">
              <item>/_wpresources/RadEditorSharePoint/5.8.0.0__1f131a624888eeed/Resources/CssEditor.css</item>
    </property>
        <property name="NewLineBr">False</property>
        <property name="SpellDictionaryLanguage">en-AU</property>
        <property name="StripFormattingOnPaste">MSWordRemoveAll,Span,Font</property>
        <property name="ImagesPaths">
              <item>PublishingImages</item>
        </property>
        <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.8.0.0__1f131a624888eeed/Resources/EditorDialogs</property>
        <property name="MaxImageSize">76800</property>
        <property name="ImagesFilters">
             <item>*.jpg</item>
             <item>*.jpeg</item>
             <item>*.gif</item>
             <item>*.png</item>
        </property>
</configuration>

ToolsFile.xml

<root>
  <modules>
      <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true"  />
      <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="false"  />
      <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="false"  />
      <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="false"  />
  </modules>

<tools name="MainToolbar" enabled="true">
    <tool name="AjaxSpellCheck" shortcut="F7" />
    <tool name="FindAndReplace" shortcut="CTRL+F" />
    <tool name="Print" shortcut="CTRL+P" />
    <tool separator="true" />
    <tool name="SelectAll" shortcut="CTRL+A" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" />
    <tool name="PasteFromWordNoFontsNoSizes" shortcut="CTRL+V" />
    <tool separator="true" />
    <tool name="Undo" shortcut="CTRL+Z" />
    <tool name="Redo" shortcut="CTRL+Y" />
    <tool separator="true" />
    <tool name="LinkManager" shortcut="CTRL+K" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
    <tool name="ImageManager" shortcut="CTRL+G" />
    <tool name="ImageMapDialog" />
    <tool separator="true" />
    <tool name="InsertTable" shortcut="CTRL+T" />
    <tool name="SetTableProperties" />
    <tool separator="true" />
    <tool name="FormatStripper" />
  </tools>
  <tools name="MossTools2">
    <tool name="ApplyClass" />
    <tool name="FormatBlock" />
    <tool name="Superscript" />
    <tool name="Subscript" />
    <tool separator="true" />
    <tool name="InsertHorizontalRule" />
    <tool name="InsertDate" />
    <tool name="InsertTime" />
    <tool name="InsertSymbol" />
    <tool separator="true" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true" />
    <tool name="Indent" />
    <tool name="Outdent" />
  </tools>
  <tools name="MossTools3" dockable="true" visible="true" enabled="true">
    <tool name="ModuleManager" />
  </tools>


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

<contextMenus>
    <contextMenu forElement="*">
      <tool name="Cut"/>
      <tool name="Copy"/>
      <tool name="Paste"/>
      <tool name="LinkManager"/>
    </contextMenu>
  </contextMenus>
</root>

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="EditModes">Design,Html</property>
    <property name="Height">240px</property>
    <property name="Width">600px</property>
    <property name="ToolbarMode">ShowOnFocus</property>
    <property name="ToolsWidth">600px</property>
        <property name="AllowThumbGeneration">True</property>
        <property name="ContentFilters">RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,IndentHTMLContent</property>
        <property name="EnableDocking">True</property>
        <property name="StripAbsoluteAnchorPaths">False</property>
        <property name="StripAbsoluteImagesPaths">False</property>
        <property name="Skin">Outlook</property>
        <property name="CssFiles">
              <item>/_wpresources/RadEditorSharePoint/5.8.0.0__1f131a624888eeed/Resources/CssEditor.css</item>
    </property>
        <property name="NewLineBr">False</property>
        <property name="SpellDictionaryLanguage">en-AU</property>
        <property name="StripFormattingOnPaste">MSWordRemoveAll,Span,Font</property>
        <property name="ImagesPaths">
              <item>PublishingImages</item>
        </property>
        <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.8.0.0__1f131a624888eeed/Resources/EditorDialogs</property>
        <property name="MaxImageSize">76800</property>
        <property name="ImagesFilters">
             <item>*.jpg</item>
             <item>*.jpeg</item>
             <item>*.gif</item>
             <item>*.png</item>
        </property>
</configuration>

ListToolsFile.xml

<root>
  <modules>
      <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true"  />
      <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="false"  />
      <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="false"  />
      <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="false"  />
  </modules>
  <tools name="EnhancedToolbar" dockable="false" enabled="true">
    <tool name="InsertTable" shortcut="CTRL+T" />
    <tool name="SetTableProperties" />
    <tool name="ImageManager" shortcut="CTRL+G" />
    <tool name="ImageMapDialog" />
    <tool name="LinkManager" shortcut="CTRL+K" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
  </tools>
  <tools name="BasicToolbar" enabled="true">
    <tool name="AjaxSpellCheck" shortcut="F7"/>
    <tool name="FindAndReplace" shortcut="CTRL+F" />
    <tool name="Print" shortcut="CTRL+P" />
    <tool separator="true" />
    <tool name="SelectAll" shortcut="CTRL+A" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" />
    <tool name="PasteFromWordNoFontsNoSizes" shortcut="CTRL+V" />
    <tool separator="true" />
    <tool name="Undo" shortcut="CTRL+Z" />
    <tool name="Redo" shortcut="CTRL+Y" />
    <tool separator="true" />
    <tool name="FormatStripper" />
  </tools>
  <tools name="BasicToolbar2">
    <tool name="ApplyClass" />
    <tool name="FormatBlock" />
    <tool name="Superscript" />
    <tool name="Subscript" />
    <tool separator="true" />
    <tool name="InsertHorizontalRule" />
    <tool name="InsertDate" />
    <tool name="InsertTime" />
    <tool name="InsertSymbol" />
    <tool separator="true" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true" />
    <tool name="Indent" />
    <tool name="Outdent" />
  </tools>
  <tools name="MossTools3" dockable="true" visible="true" enabled="true">
    <tool name="ModuleManager" />
  </tools>


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

<contextMenus>
    <contextMenu forElement="*">
      <tool name="Cut"/>
      <tool name="Copy"/>
      <tool name="Paste"/>
      <tool name="LinkManager"/>
    </contextMenu>
  </contextMenus>
</root>

CssEditor.css

/* _lcid="1033" _version="12.0.4518"
    _LocalBinding */
Body
{font-family:Verdana;
font-size:10pt;
}


h1
{
    COLOR:#000000;
    font-weight:bold;
    font-size:16pt;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0;
}

h2
{
    COLOR:#000000;
    font-size:14pt;
    line-height:24px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px 0 5px 0;
}
h3
{
    COLOR:#666699;
    font-weight:bold;
    font-size:12pt;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px 0 5px 0;
}
h4
{
    COLOR:#666699;
    font-weight:bold;
    font-size:11pt;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px 0 5px 0;
}
h5
{
    COLOR:#666699;
    font-weight:bold;
    font-size:10pt;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px 0 5px 0;}
h6
{
    COLOR:#FFFFFF;
    background-color:#666699;
    font-size:9pt;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0px 0 5px 0;}

p
{
    COLOR:black;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    font-size:9pt;
    font-family:Verdana;
    margin-bottom:10pt;
    margin-top:0pt;
}

/* _lcid="1033" _version="12.0.4518"
    _LocalBinding */


.bold
{
    font-weight:bold;
    color:#000000;
    font-size:9pt;
}
.small
{
    font-size: 8pt;
    }

.blue
{
    COLOR:#3366CC;
    font-weight:bold;
    font-size:9pt;
}
.red
{
    COLOR:#FF0000;
    font-weight:bold;
    font-size:9pt;
}
.green
{
    COLOR:#009900;
    font-weight:bold;
    font-size:9pt;
}
.legislation
{
    color:#000000;
    font-style:italic;
    font-size:9pt;

}
.title-With-Background
{
    background-color: #FEDD7A;
    margin: 0;
    font-size:9pt;
}
OL
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    list-style-type:upper-latin;
    margin: 0 10px 0 30px;
    padding: 0 0 0px 10px;
}
OL.RomanList
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    list-style-type: lower-roman;
    margin: 0 10px 0 30px;
    padding: 0 0 0px 10px;
    text-transform:none;
}
OL.NumberedList
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    list-style-type:decimal;
    margin: 0 10px 0 30px;
    padding: 0 0 0px 10px;
}
OL.AbcList
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    list-style-type:lower-alpha;
    margin: 0 10px 0 30px;
    padding: 0 0 0px 10px;
}

UL
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    line-height: 120%;
    list-style-type: disc;
    list-style-image: none;
    margin: 0 10px 0 15px;
    padding: 0 0 0 10px;
    word-spacing: 0;
}

UL.LoganBullets
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    line-height: 120%;
    list-style-image:url('http://qaemoss:30333/SiteCollectionImages/TheBUZZ/bullet-light-shadow.jpg');
    margin: 0 10px 0 15px;
    padding: 0 0 0px 10px;
    word-spacing: 0;
}
UL.SquareBullets
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    line-height: 120%;
    list-style-type: square;
    list-style-image:none;
    word-spacing: 0;
    margin: 0 10px 10px 15px;
    padding: 0 0 0px 10px;

}
UL.DiscBullets
{
    font-family: Verdana;
    font-size:9pt;
    color: #000000;
    text-indent: 0;
    line-height: 120%;
    list-style-type: disc;
    list-style-image:none;
    word-spacing: 0;
    margin: 0 10px 10px 15px;
    padding: 0 0 0px 10px;

}
li{
    padding: 4px 0 0 0;
    }
}

IMG.ImageBorder
{
    border: 2px solid #666699;
    background-color: #FFFFFF;
}

I look forward to your reply.

Thanks,
Claudz

[claudz]

Hi Rumen,

I've found out another interesting thing about this issue, which may be of use to you and the Telerik team.

The cursor jumps up when the ToolbarMode property is set to ShowOnFocus in the ConfigFile.xml.

However, when the ToolbarMode is set to Default, the cursor doesn't jump.

We are happy to use Default as our ToolbarMode setting in our system, but I hope this has shed some light on the issue.

I also found a post from someone who is experiencing the same thing with the cursor jump. According to that post, this issue is a known bug with RadEditor (http://www.telerik.com/community/forums/sharepoint-2007/full-featured-editor/cursor-jumps-to-top-of-the-text-edito.aspx).

Thanks,
Claudz

[Rumen]

Hi Claudz,

I was not aware of this forum thread, but I verified the issue that you experience is exactly the same as this described in forum thread. I was able to reproduce the problem with the live Toolbar mode demo of RadEditor.

I escalated the problem to the attention of our RadEditor's developers and we raised its priority to Very High. We will do our best to fix the problem for the Q2 2010 SP2 release.

As a temporary workaround you can use the default or floating toolbar modes.

Kind regards,
Rumen
the Telerik team

[claudz]

Hi Rumen,

I was just wondering what the status is with this issue and whether the Q2 2010 SP2 release has been released yet with the fix?

Thanks,
Claudz

[Rumen]

Hi Claudz,

I am afraid that the problem is not trivial and it is still not fixed.

My suggestion is to use the suggested toolbar modes or configure RadEditor to use its new DIV based content area mode. To enable the DIV mode, set the ContentAreaMode property to DIV.

Kind regards,
Rumen
the Telerik team