Another Clean HTML question

2 posts, 0 answers
  1. Tony
    Tony avatar
    24 posts
    Member since:
    Nov 2011

    Posted 02 Aug 2012 Link to this post

    Telerik

    I have searched thru the forums and it seems for the past year, Telerik keeps saying they are "considering" adding cleaner HTML. When will this happen?

    The release notes for the latest versoin Q2 2012 state:
    "HtmlFormatProvider should export only values that are not default for HTML "

    However, I still get tons of extra HTML formatting just for typing in "Hello World".  My XAML is as follows for my rich text box:

    <telerik:RadRichTextBox x:Name="editor" IsSpellCheckingEnabled="False" Height="Auto" Margin="5 0 5 5"
        MinHeight="60" DocumentContentChanged="editor_DocumentChanged"
        Grid.Row="1"
        IsTabStop="True"  />


    Here is the code I am using to get the HML:

    public string GetHtml(RadDocument document)
    {
        HtmlFormatProvider provider = new HtmlFormatProvider();
        HtmlExportSettings exportSettings = new HtmlExportSettings();
     
        exportSettings.ExportStyleMetadata = false;
        exportSettings.ExportFontStylesAsTags = true;
        exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment;
        exportSettings.StylesExportMode = StylesExportMode.Inline;
     
        provider.ExportSettings = exportSettings;
     
        var htmlblock = provider.Export(document);
        return htmlblock;
    }


    When I inspect htmlblock above, I get:

    <style type="text/css">
    p { text-indent: 0pt;padding: 0px 0px 0px 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 12px;margin-left: 0px;text-indent: 0px;line-height: 1.15;text-align: left; }
    body { font-family: 'Verdana';font-size: 16px; }
    .TableNormal {  }
    .TableGrid { margin-bottom: 0px;line-height: 1; }
    .Normal {  }
    .Heading1 { font-size: 18.6666660308838px;color: #4F81BD;margin-top: 32px;margin-bottom: 0px; }
    .Heading1Char { font-size: 18.6666660308838px;color: #4F81BD;margin-top: 32px;margin-bottom: 0px; }
    .Heading2 { font-size: 17.3333339691162px;color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading2Char { font-size: 17.3333339691162px;color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading3 { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading3Char { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading4 { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading4Char { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading5 { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading5Char { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading6 { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading6Char { color: #4F81BD;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading7 { color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading7Char { color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading8 { font-size: 13.3333330154419px;color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading8Char { font-size: 13.3333330154419px;color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading9 { font-size: 13.3333330154419px;color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Heading9Char { font-size: 13.3333330154419px;color: #000000;margin-top: 13.3333330154419px;margin-bottom: 0px; }
    .Caption { font-family: 'Calibri';font-size: 12px;color: #4F81BD;line-height: 1; }
    .TOC1 { margin-bottom: 6.66666650772095px; }
    .TOC2 { margin-bottom: 6.66666650772095px;margin-left: 14.6666669845581px; }
    .TOC3 { margin-bottom: 6.66666650772095px;margin-left: 29.3333339691162px; }
    .TOC4 { margin-bottom: 6.66666650772095px;margin-left: 44.0000009536743px; }
    .TOC5 { margin-bottom: 6.66666650772095px;margin-left: 58.6666679382324px; }
    .TOC6 { margin-bottom: 6.66666650772095px;margin-left: 73.3333349227905px; }
    .TOC7 { margin-bottom: 6.66666650772095px;margin-left: 88.0000019073486px; }
    .TOC8 { margin-bottom: 6.66666650772095px;margin-left: 102.666668891907px; }
    .TOC9 { margin-bottom: 6.66666650772095px;margin-left: 117.333335876465px; }
    .TableofFigures { margin-bottom: 0px; }
    .Hyperlink { color: #0000FF; }
    </style><p class="Normal "><span>Hello World</span></p>


    If I read the release note correct, shouldnt all the default styles/classes not be included?? I really expect:

    <p>Hello World</b>

     Or at least something minimal. Am I doing something wrong ? If not, what does that release note mean? ALso, what would be a safe way to get clean html ?

  2. Petya
    Admin
    Petya avatar
    975 posts

    Posted 07 Aug 2012 Link to this post

    Hello Tony,

    There is one more property you can set in order to customize the exported HTML. It is StyleRepositoryExportMode and setting it to DontExportStyles in addition to the properties you've already set will give you a result like the following:

    <p style="margin-top: 0px;margin-bottom: 12px;line-height: 1.15
    ;text-align: left;"><span style="font-family: 'Verdana';font-size: 16px;">Hello World1</span></p>

    Unfortunately, this is as "clean" as it gets. It is implemented this way, so the result would look as close as possible in the editor and in a browser after export.

    However, if this output does not satisfy your needs, you can always implement a custom format provider using the IDocumentFormatProvider interface. Kind regards,
    Petya
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
Back to Top