This is a migrated thread and some comments may be shown as answers.

Inline Styles for HTML tags

8 Answers 333 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Deepthi
Top achievements
Rank 1
Deepthi asked on 04 Jan 2011, 10:17 AM

I have an application in which I am using RadRichTextBox, everything works fine but I am trying to convert the text entered in this textbox to HTML format. For this I am using HtmlFormatProvider. But the output is not like I want it to be.
for eg. Suppose I enter text "hello" and convert it, it gives me the following output.

"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\" http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><title>Untitled</title><style type=\"text/css\">\r\n.s_D8D99854 { font-family: 'Verdana';font-style: Normal; } \r\n</style></head><body><p ><span class=\"s_D8D99854\">&nbsp;hello</span></p></body></html>"

But we are expecting  in the following format
<p ><span style=\"font-family: 'Verdana';font-style: Normal;\">&nbsp;hello</span></p>

Is there any option in RichTextBox to get  the output in the above format?

Thanks,
Deepthi

8 Answers, 1 is accepted

Sort by
0
Accepted
Iva Toteva
Telerik team
answered on 06 Jan 2011, 04:56 PM
Hello Deepthi,

HtmlFormatProvider exports valid HTML documents by default. The good news is that we have provided some options to control the Html output which might be just what you need.

HtmlFormatProvider has HtmlExportSettings (accessible through the ExportSettings property) with two options:

DocumentExportLevel - this controls if the the whole Html "Document" will be exported (by default) or just the "Fragment" representing the document body - this option is what you need. 

Another option - StylesExportMode controls how styles should be exported. If you specify "Classes" (the default value) html will contain Stylesheet blocks and html elements will be assigned class names. The "Inline" option (what you need) will make HtmlFormatProvider to export styles inline for each html element.

You can set this options in code like this:

HtmlExportSettings exportSettings = new HtmlExportSettings();
exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment;
exportSettings.StyleExportMode = StylesExportMode.Inline;
HtmlFormatProvider formatProvider = new HtmlFormatProvider();
formatProvider.ExportSettings = exportSettings;
.. formatProvider.Export(document); ...

I hope this will help.If you have any other questions, do not hesitate to contact us again.

All the best,
Iva
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
0
Daniel Morgenthaler
Top achievements
Rank 2
answered on 03 Aug 2011, 07:17 PM
Hi
This could be the solution for me. I have a WCF RIA Service and I use the HtmlDataProvider to bind the RichTextBox to the Model. How can I use the HtmlFormatProvider with the HtmlDataProvider?

Thanks and have a nice day!

Update: I found the solution!
<telerikHtml:HtmlDataProvider Name="htmlDataProvider" RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding Protokolleintrag, Mode=TwoWay, NotifyOnValidationError=true, TargetNullValue='', ValidatesOnExceptions=true}">
                <telerikHtml:HtmlDataProvider.FormatProvider>
                    <telerikHtml:HtmlFormatProvider>
                        <telerikHtml:HtmlFormatProvider.ExportSettings>
                            <telerikHtmlMain:HtmlExportSettings DocumentExportLevel="Fragment" StylesExportMode="Inline" />
                        </telerikHtml:HtmlFormatProvider.ExportSettings>
                    </telerikHtml:HtmlFormatProvider>
                </telerikHtml:HtmlDataProvider.FormatProvider>
            </telerikHtml:HtmlDataProvider>
Found the hint in a WPF track: HTML Format
0
Matthew
Top achievements
Rank 1
answered on 14 Sep 2011, 03:01 PM
Daniel, I've been looking for a way to do this for about 3 hours now. Thanks so much for posting this!! Exactly what I was looking for.
0
Mel
Top achievements
Rank 1
answered on 06 Dec 2012, 02:18 PM
Hi Iva,

I tried to do the same thing as Deepthy so I tried the solution you provided.
It didn't work for me exactly as you said. 
I also had to set 

htmlFormatProvider.ExportSettings.StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles;

This was weird because from what I read in the documentation for the HtmlFormatProvider that should be the default setting.

If this has change, maybe the documentation needs to be updated also,

It's good that it's working, thank you!

Adrian.
0
Petya
Telerik team
answered on 11 Dec 2012, 09:56 AM
Hi Adrian,

Thank you for your feedback!

Indeed, the StyleRepositoryExportMode property was not yet a part of the export settings when Iva's previous post was made. However, the documentation on the matter is rather accurate:
StyleRepositoryExportMode – specifies if the styles of the document kept in the StyleRepository of the document should be serialized. The options are ExportStylesAsCssClasses - the default value, and DontExportStyles.

Though I can see how it may be a bit misleading. We are currently in the process of updating this exact article, so we will make sure to change this sentence as well.

If you have other feedback regarding our online documentation feel free to share it with us at documentation@telerik.com.
 

Regards,
Petya
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Michael MSTG
Top achievements
Rank 1
answered on 04 Aug 2014, 11:08 PM
It has been quite some time since this post however I used this as a guide to add the HTML format provide to my code.

I have it as so:
Dim provider As New HtmlFormatProvider()
        Dim settings As New HtmlExportSettings()
 
        With settings
            .DocumentExportLevel = DocumentExportLevel.Fragment
            .StylesExportMode = StylesExportMode.Inline
            .ExportBoldAsStrong = True
            .ExportItalicAsEm = True
        End With
 
        provider.ExportSettings = settings
        dataProviderPricingDescription.FormatProvider = provider
        rtbPricingDescription.Document.History.IsEnabled = False


However this always produces the following HTML:
<style type="text/css">  p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; }   body { font-family: 'Verdana';font-size: 16px; }   .Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; }   .TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;border-collapse: collapse; } </style><p class="Normal "><span style="font-family: 'Arial';">test</span></p>

Am I missing something?  Should it have not produced the CSS style block?  I thought that is what setting the StyleExportMode was support to prevent.

I don't want that 'body' CSS tag as the HTML is injected into a non-Silverlight web site and that tag jacks up all other fonts.
0
Michael MSTG
Top achievements
Rank 1
answered on 04 Aug 2014, 11:11 PM
The XAML is as so:
<telerikDocumentsHtml:HtmlDataProvider x:Name="dataProviderPricingDescription"
                                       RichTextBox="{Binding ElementName=rtbPricingDescription}"
                                       Html="{Binding PricingDescription, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" />
<telerik:RadRichTextBox x:Name="rtbPricingDescription"
                        AcceptsReturn="True"
                        AcceptsTab="True"
                        HorizontalScrollBarVisibility="Disabled"
                        VerticalScrollBarVisibility="Visible"
                        IsSelectionMiniToolBarEnabled="True"
                        IsSpellCheckingEnabled="False"
                        LayoutMode="Flow"
                        Grid.Column="0"
                        Grid.Row="0" />
0
Mihail
Telerik team
answered on 07 Aug 2014, 12:14 PM
Hello Michael,

With the StylesExportMode you can control how the local styling of the elements will be exported. As inlines styling or as classes.

The styles which are still exported in your case are the styles from the style repository of RadDocument. You can control how those styles will be exported with the StyleRepositoryExportMode in the HtmlExportSettings. The available options are ExportStylesAsCssClasses and DontExportStyles.

Here is example on how to do it for your case:
settings.StylesExportMode = StylesExportMode.Inline;
settings.StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles;

If you have further questions do not hesitate to contact us again.

Regards,
Mihail
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
RichTextBox
Asked by
Deepthi
Top achievements
Rank 1
Answers by
Iva Toteva
Telerik team
Daniel Morgenthaler
Top achievements
Rank 2
Matthew
Top achievements
Rank 1
Mel
Top achievements
Rank 1
Petya
Telerik team
Michael MSTG
Top achievements
Rank 1
Mihail
Telerik team
Share this question
or