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

Inline Styles for HTML tags

8 Answers 406 Views

RichTextBox

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

This question is locked. New answers and comments are not allowed.

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\"> hello</span></p></body></html>"

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

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

Thanks,
Deepthi

8 Answers, 1 is accepted

Accepted

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

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

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.

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.

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

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.