[Solved] Getting rid of empty span tags

[Tracey]

Hi

I am using the RadRichTextBox as a html editor and using the following to format the html

HtmlFormatProvider htmlFormatProvider = newHtmlFormatProvider();
HtmlExportSettings settings = newHtmlExportSettings { ImageExportMode = ImageExportMode.ImageExportingEvent, DocumentExportLevel = DocumentExportLevel.Fragment, StylesExportMode = StylesExportMode.Inline };
settings.ImageExporting += (s, e) =>
{
    e.Src = e.Image.UriSource.ToString();
    e.Alt = "image";
};
htmlFormatProvider.ExportSettings = settings;
HtmlData.FormatProvider = htmlFormatProvider;

Where HtmlData is the HtmlDataProvider

A lot of empty span tags are being produced (eg <span style="font-family: 'Verdana';font-style: Normal;font-weight: normal;font-size: 16px;color: #000000;" /> and IE cannot deal with them so any content that follows are styled with whatever styles are in the empty span tag.

Is there any way of removing these empty span tags

Many Thanks
Tracey

[Iva Toteva]

Hello Tracey,

Empty spans should not be created in the first place. Could you please elaborate on the way you are creating the document (is it done through import or not), what manipulations are you performing on it, anything else that can be related. A sample document (in XAML format) or project and some details would be greatly appreciated.
Looking forward to hearing from you again.

Best wishes,
Iva
the Telerik team

[Tracey]

Hi Iva

The empty spans are being inserted whenever you add a Hyperlink the html comes out like so:

<p style="margin: 0px 0px 12px 0px;text-align: left;text-indent: 0pt;padding: 0px 0px 0px 0px;">
<a href="http://www.uwe.ac.uk" target="_blank">
<span style="font-family: 'Arial';font-style: Normal;font-weight: normal;font-size: 12px;color: #0000FF;text-decoration: underline;">
UWE Website
</span>
</a>
<span style="font-family: 'Arial';font-style: Normal;font-weight: normal;font-size: 12px;color: #000000;" />
</p>

Here's my XAML

<controls:ChildWindow x:Class="UWEDecision.Design.TestEditNode"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:telerikHtml="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"
    xmlns:telerikHtmlMain="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents"
    Title="EditNode" Width="800" Height="670"
    xmlns:node="clr-namespace:UWEDecision.DecisionObjects.NodeObjects">
    <controls:ChildWindow.Resources>
        <telerikHtml:HtmlDataProvider x:Name="HtmlExport" x:Key="htmlDataProvider" RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding ElementName=HtmlText, Path=Text, Mode=TwoWay}"></telerikHtml:HtmlDataProvider>
    </controls:ChildWindow.Resources>

    <Grid x:Name="LayoutRoot" Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="45" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="150" />
            <RowDefinition Height="120" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="120" />
        </Grid.RowDefinitions>

        <!-- Rich Text Editor Buttons -->
        <telerik:RadRichTextBoxRibbonUI Grid.Row="1" ApplicationButtonImageSource="/RichTextBox;component/Images/RichTextBox/MSOffice/AppIcon-telerik.png" ApplicationName="Node Content" DataContext="{Binding Path=Commands, ElementName=richTextBox}">
            <telerik:RadRichTextBoxRibbonUI.QuickAccessToolBar>
                <telerik:QuickAccessToolBar>
                    <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=SaveCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/save.png" Text="Save" />
                    <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=UndoCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/undo.png" Text="Undo" />
                    <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=RedoCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/redo.png" Text="Redo" />
                </telerik:QuickAccessToolBar>
            </telerik:RadRichTextBoxRibbonUI.QuickAccessToolBar>
            <telerik:RadRibbonTab Header="Home">
                <telerik:RadRibbonGroup DialogLauncherVisibility="Visible" Header="Font" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowFontPropertiesDialogCommand}">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="2" Variant="Medium" />
                        <telerik:GroupVariant Priority="4" Variant="Small" />
                        <telerik:GroupVariant Priority="5" Variant="Collapsed" />
                    </telerik:RadRibbonGroup.Variants>
                    <telerik:RadOrderedWrapPanel>
                        <StackPanel Orientation="Horizontal">
                            <telerik:RadRibbonComboBox CanAutocompleteSelectItems="False" CanKeyboardNavigationSelectItems="False" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Tag}" Height="21" IsReadOnly="True" OpenDropDownOnFocus="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontFamilyCommand}" Width="135">
                                <telerik:RadRibbonComboBoxItem Content="Arial" FontFamily="Arial" Tag="Arial" />
                                <telerik:RadRibbonComboBoxItem Content="Arial Black" FontFamily="Arial Black" Tag="Arial Black" />
                                <telerik:RadRibbonComboBoxItem Content="Calibri" FontFamily="Calibri" Tag="Calibri" />
                                <telerik:RadRibbonComboBoxItem Content="Comic Sans MS" FontFamily="Comic Sans MS" Tag="Comic Sans MS" />
                                <telerik:RadRibbonComboBoxItem Content="Courier New" FontFamily="Courier New" Tag="Courier New" />
                                <telerik:RadRibbonComboBoxItem Content="Georgia" FontFamily="Georgia" Tag="Georgia" />
                                <telerik:RadRibbonComboBoxItem Content="Lucida Sans Unicode" FontFamily="Lucida Sans Unicode" Tag="Lucida Sans Unicode" />
                                <telerik:RadRibbonComboBoxItem Content="Times New Roman" FontFamily="Times New Roman" Tag="Times New Roman" />
                                <telerik:RadRibbonComboBoxItem Content="Trebuchet MS" FontFamily="Trebuchet MS" Tag="Trebuchet MS" />
                                <telerik:RadRibbonComboBoxItem Content="Verdana" FontFamily="Verdana" Tag="Verdana" />
                            </telerik:RadRibbonComboBox>
                            <telerik:RadRibbonComboBox CanAutocompleteSelectItems="False" CanKeyboardNavigationSelectItems="False" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Tag}" Height="21" IsEditable="True" IsReadOnly="True" IsTextSearchEnabled="False" OpenDropDownOnFocus="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontSizeCommand}" Width="45">
                                <telerik:RadRibbonComboBoxItem Content="8" Tag="10.67" />
                                <telerik:RadRibbonComboBoxItem Content="9" Tag="12" />
                                <telerik:RadRibbonComboBoxItem Content="12" Tag="16" />
                                <telerik:RadRibbonComboBoxItem Content="18" Tag="24" />
                            </telerik:RadRibbonComboBox>
                        </StackPanel>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=IncrementFontSizeCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/font-increasesize.png" />
                            <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=DecrementFontSizeCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/font-decreasesize.png" />
                        </telerik:RadButtonGroup>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ClearFormattingCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/ClearFormatting16.png" />
                        </telerik:RadButtonGroup>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBoldCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/bold.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleItalicCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/italic.png" />
                            <telerik:RadRibbonSplitButton IsToggle="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleUnderlineCommand}" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/underline.png">
                                <telerik:RadRibbonSplitButton.DropDownContent>
                                    <telerik:RadGallery ItemHeight="26" ItemWidth="156" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeUnderlineDecorationCommand}" ViewportHeight="210" ViewportWidth="157">
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline1.png" Tag="Line" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline2.png" Tag="DoubleLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline3.png" Tag="ThickLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline4.png" Tag="DottedLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline5.png" Tag="DashedLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline6.png" Tag="DotDashedLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline7.png" Tag="DotDotDashedLine" />
                                        <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline8.png" Tag="Wave" />
                                    </telerik:RadGallery>
                                </telerik:RadRibbonSplitButton.DropDownContent>
                            </telerik:RadRibbonSplitButton>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleStrikethroughCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/Strikethrough16.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleSubscriptCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/subscript.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleSuperscriptCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/superscript.png" />
                        </telerik:RadButtonGroup>
                        <telerik:RadButtonGroup>
                            <telerik:HighlightColorPicker AutomaticColor="Transparent" Height="22" NoColorText="No color" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontHighlightColorCommand}" SelectedColor="Yellow" Width="36" />
                            <telerik:RadColorPicker Height="22" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontForeColorCommand}" SelectedColor="Red" Width="36" />
                        </telerik:RadButtonGroup>
                    </telerik:RadOrderedWrapPanel>
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup DialogLauncherVisibility="Visible" Header="Paragraph" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowParagraphPropertiesDialogCommand}">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="1" Variant="Medium" />
                        <telerik:GroupVariant Priority="3" Variant="Collapsed" />
                    </telerik:RadRibbonGroup.Variants>
                    <telerik:RadOrderedWrapPanel>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBulletsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleNumberedCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />
                        </telerik:RadButtonGroup>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleFormattingSymbolsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/formatting-symbols.png" />
                        </telerik:RadButtonGroup>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton CommandParameter="Left" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignleft.png" Text="Align Left" />
                            <telerik:RadRibbonToggleButton CommandParameter="Center" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/aligncenter.png" Text="Center" />
                            <telerik:RadRibbonToggleButton CommandParameter="Right" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignright.png" Text="Align Right" />
                            <telerik:RadRibbonToggleButton CommandParameter="Justify" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignjustify.png" Text="Justify" />
                        </telerik:RadButtonGroup>
                    </telerik:RadOrderedWrapPanel>
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Tables">
                    <telerik:RadRibbonDropDownButton CollapseToMedium="WhenGroupIsMedium" Command="{Binding Path=InsertTableCommand}" LargeImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/InsertTable.png" Size="Large" Text="Insert">
                        <telerik:RadRibbonDropDownButton.DropDownContent>
                            <StackPanel>
                                <telerik:RadRibbonButton ClickMode="Press">
                                    <telerik:TableSizePicker Command="{Binding Path=InsertTableCommand}" />
                                </telerik:RadRibbonButton>
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadRibbonButton HorizontalAlignment="Stretch" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowInsertTableDialogCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/InsertTable.png" Text="Insert Table..." />
                            </StackPanel>
                        </telerik:RadRibbonDropDownButton.DropDownContent>
                    </telerik:RadRibbonDropDownButton>
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Links">
                    <telerik:RadRibbonButton LargeImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/inserthyperlink.png" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowInsertHyperlinkDialogCommand}" Size="Large" Text="Hyperlink" />
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Symbols">
                    <telerik:RadRibbonButton LargeImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/Symbol.png" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowInsertSymbolWindowCommand}" Size="Large" Text="Symbol" />
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRichTextBoxRibbonUI>

        <!-- Rich Text -->
        <telerik:RadRichTextBox Grid.Row="2" FontFamily="Arial" FontSize="12" DocumentInheritsDefaultStyleSettings="True" x:Name="richTextBox" IsContextMenuEnabled="False" IsSelectionMiniToolBarEnabled="False" />

        <!-- HTML Text -->
        <Border Margin="0" Grid.Row="5" BorderBrush="DarkGray" BorderThickness="1 0 1 1" CornerRadius="0 0 5 5">
            <TextBox x:Name="HtmlText" Margin="0" Grid.Row="3" Grid.Column="1" IsReadOnly="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" BorderThickness="0" Text="{Binding Content}" />
        </Border>

        <!-- Close Buttons -->
        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="4" />
        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="4" />

    </Grid>
</controls:ChildWindow>

And code behind

using System;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls.RichTextBoxUI.Dialogs;
using Telerik.Windows.Controls.RichTextBoxUI;
using Telerik.Windows.Documents.Proofing;
using UWEDecision.DecisionObjects.NodeObjects;
using System.Globalization;
using Telerik.Windows.Documents.FormatProviders.Html;

namespace UWEDecision.Design
{
    public partial class TestEditNode : ChildWindow
    {
        public NodeView AttachedNode;

        public TestEditNode(String content)
        {
            InitializeComponent();

            HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
            HtmlExportSettings settings = new HtmlExportSettings { ImageExportMode = ImageExportMode.ImageExportingEvent, DocumentExportLevel = DocumentExportLevel.Fragment, StylesExportMode = StylesExportMode.Inline };
            settings.ImageExporting += (s, e) =>
            {
                e.Src = e.Image.UriSource.ToString();
                e.Alt = "image";
            };
            htmlFormatProvider.ExportSettings = settings;
            HtmlExport.FormatProvider = htmlFormatProvider;

            // AttachedNode = node;

            // Next method calls are required only to work around limitations for using MEF in Examples
            this.richTextBox.FindReplaceDialog = new FindReplaceDialog();
            this.richTextBox.InsertHyperlinkDialog = new RadInsertHyperlinkDialog();
            this.richTextBox.ParagraphPropertiesDialog = new RadParagraphPropertiesDialog();
            this.richTextBox.InsertSymbolWindow = new RadInsertSymbolDialog();
            this.richTextBox.SelectionMiniToolBar = new SelectionMiniToolBar();
            this.richTextBox.InsertTableDialog = new InsertTableDialog();
            this.richTextBox.TablePropertiesDialog = new TablePropertiesDialog();
            this.richTextBox.FontPropertiesDialog = new FontPropertiesDialog();
            ((DocumentSpellChecker)this.richTextBox.SpellChecker).AddDictionary(new RadEn_USDictionary(), CultureInfo.InvariantCulture);

            if (!String.IsNullOrEmpty(content))
            {
                this.DataContext = new HTMLPage(content);
            }
        }

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }

        public class HTMLPage
        {
            private String content;
            public String Content { get { return this.content; } set { this.content = value; } }
            public HTMLPage(String _content)
            {
                this.content = _content;
            }
        }

    }
}

[Iva Toteva]

Hello Tracey,

Thank you for getting to us about this problem.
We have scheduled for revision the current behavior regarding the export of Hyperlinks.
If you have other questions, do not hesitate to contact us again.

Regards,
Iva
the Telerik team

[Shoeb]

Iva,

Do we have any solution to this? I am facing the same issue. Worst, when I tried to open this html fragment in ASP.NET RadEditor (with empty span tag), entire IE get crashed. This is happening after I upgraded telerik component to Q1 2011 SP2 release (2011.1.519.35) recently.

Thanks
Shoeb

[Iva Toteva]

Hi Shoeb,

We have not changed the export of hyperlinks at the end of the paragraph and they are still exported as in Tracey's snippet. What you can do is to strip these empty spans after the export.
This will not create any glitches when the file is imported back in RadRichTextBox and should work correctly with other consumers of the HTML output.

Regards,
Iva
the Telerik team