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

HTML Output from RadRichTextbox

26 Answers 747 Views

RichTextBox

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

Deepthi asked on 04 Jan 2011, 10:14 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 i dont want all these tags. I need just the content inside body tag.
Is there any property for the RichTextbox to omit these tags?

Thanks,
Deepthi

26 Answers, 1 is accepted

Accepted

answered on 05 Jan 2011, 02:23 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 its 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" block with style classes and html elements will be assigned the corresponding class names. The "Inline" option (which you would need) will instruct HtmlFormatProvider to export any 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 would help. If you have any other questions, do not hesitate to contact us again.

Regards,
Iva
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight

answered on 06 Jan 2011, 09:47 AM

Hi Iva,
Thanks for the quick response. This is what I wanted, but I am unable to find DocumentExportLevel and StyleExportMode properties in Telerik.Windows.Documents.FormatProviders.Html.Export namespace.

HtmlExportSettings exportSettings = new HtmlExportSettings();
exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment;
exportSettings.StyleExportMode = StylesExportMode.Inline;

It gives me the following error:
'Telerik.Windows.Documents.FormatProviders.Html.Export.HtmlExportSettings' does not contain a definition for 'DocumentExportLevel' and no extension method 'DocumentExportLevel' accepting a first argument of type 'Telerik.Windows.Documents.FormatProviders.Html.Export.HtmlExportSettings' could be found (are you missing a using directive or an assembly reference?)

Additional Information: The telerik radcontrols dll I am using is
Version: 2010.2.714.1040
Runtime Version: v2.0.50727

Please help.
Thanks,
Deepthi

answered on 07 Jan 2011, 05:58 PM

Hi Deepthi,

We are glad to hear that updating to Q3 solved your problem.
To your other question, ImageInline does support creation of images from an absolute URI. The site in which the image is hosted, however, has to allow that in its cross-domain policy file. A simple example (for a site that has a permissive cross-domain policy) is provided below:

string url = "http://romeo.roy.free.fr/photos/Maroc1/IMG_0930-1600.jpg";

ImageInline imageInline = new ImageInline()

{

UriSource = new Uri(url, UriKind.Absolute),

Width = 150,

Height = 150,

};

In case the site does not have a permissive policy, you can try:

Image image = new Image()

{

Source = new BitmapImage(new Uri(url, UriKind.Absolute)),

Width = 150,

Height = 150,

};

InlineUIContainer imageContainer = new InlineUIContainer(image, new Size(150, 150));

this.radRichTextBox1.InsertInline(imageContainer);

Hope that helps.

Kind regards,
Iva
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight

answered on 12 Jan 2011, 05:29 PM

Hello Deepthi,

You can customize the output of the document, which is exported via HtmlFormatProvider using the ExportSettings property like this:

HtmlFormatProvider provider = new HtmlFormatProvider();

HtmlExportSettings settings = new HtmlExportSettings();

settings.ImageExportMode = ImageExportMode.UriSource;

provider.ExportSettings = settings;

//proceed to export the document

The code above produces the following output:

<style type="text/css">

.p_CC664AAA { margin: 0px 0px 12px 0px;text-align: left;text-indent: 0pt;padding: 0px 0px 0px 0px; }

...

</style>

<p class="p_CC664AAA">

<img src=

"http://static.businessinsider.com/image/4d17b3254bd7c8df6e1a0000-400-300/lakers-nike-sneakers-christmas-nba-basketball-grinch.jpg"

/>

***

</p>

class and style attributes (class="float_right" style="border: 0px solid;"):

We only support inline images, so floating is out of the question for now.
The style is set on the paragraph element and cannot be set on the image itself. (You can opt for Inline StyleExportMode using the property of the ExportSettings instead of Classes, but they will be set on the paragraph either ways.)

width and height properties (width="400" height="300"):

The width and height attributes are exported only if the image export mode is Base64Encoded or Base64EncodedSplit, i.e. you cannot have an image, set by its Src and having height and width attributes.

alt property

The alt property is not normally set, but you can do that yourself, by setting the ImageExportMode to ImageExportingEvent like this:

***

settings.ImageExportMode = ImageExportMode.ImageExportingEvent;

settings.ImageExporting += new EventHandler<ImageExportingEventArgs>(settings_ImageExporting);

***

void settings_ImageExporting(object sender, ImageExportingEventArgs e)

{

e.Alt = "some alt";

e.Src = e.Image.UriSource.AbsoluteUri;

}

If you have any other questions, do not hesitate to contact us again.

Best wishes,
Iva
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

answered on 13 Jan 2011, 01:30 PM

Hi Iva,

Issue 1:
When i try to add image http://www.microsoft.com/showcase/Content/img/cps/En-us/CPS_IE9_icon.png to Richtextbox , it is giving object reference not set to instance object error when exporting to html.
We are using following code to export content to html

IDocumentFormatProvider exporter = new HtmlFormatProvider();
var output = new MemoryStream();
HtmlExportSettings exportSettings = new HtmlExportSettings();
exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment;
exportSettings.StylesExportMode = StylesExportMode.Inline;
exportSettings.ImageExportMode = ImageExportMode.UriSource;
HtmlFormatProvider formatProvider = new HtmlFormatProvider();
formatProvider.ExportSettings = exportSettings;
formatProvider.Export(document, output);
output.Seek(0, SeekOrigin.Begin);
var reader = new StreamReader(output);
return reader.ReadToEnd();

Issue2:
When i set the following html as input to RadTextBox, image is not rendering.
<p><P style="font-szie=20px"> Hello</p>
<img src="http://www.microsoft.com/showcase/Content/img/cps/En-us/CPS_IE9_icon.png" width="100" height="100" />
</p>

We are using following code to import html to Radtextbox
HtmlFormatProvider formatProvider = new HtmlFormatProvider();
HtmlImportSettings settings = new HtmlImportSettings();
formatProvider.ImportSettings = settings;
RadDocument doc= formatProvider.Import(txtSource.Text);
editor.Document = doc;

Please let me know what i am doing wrong here.

If possible could you please attach one sample on exporting and importing absolute imageurls.

Thanks

answered on 19 Jan 2011, 12:28 PM

InsertCustomControl.zip

Hello Deepthi,

I was unable to reproduce the null reference exception you are talking about. I don't see what the cause might be, but you can try putting the Memory stream in a using-statement, as described here.
As for the image from Microsoft's site, they have not provided a cross-domain policy file, which makes their policy non-permissive. You can read more about Silverlight's security policy here. In a nutshell, you cannot load an Image which comes from a site with non-permissive policy.
I am attaching a demo, illustrating how you can export images setting their source through their URL instead of exporting them as RawData.

All the best,
Iva
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

answered on 16 Jul 2012, 12:24 PM

Hello,

is it possible to have the HtmlFormatProvider export the HTML using no CSS but HTML only? Or maybe is there an option to have the radRichTextBox Control not use CSS internally?

Background is, that I am printing HTML Formatted Texts in Microsoft Dynamics NAV Reports and the Textbox Control (in RDLC) doesn't completely support CSS. Color-Formatting works (in RDLC HTML-Textboxes) but that's about it, no font families, no bold/italic/underline, no margins. The HtmlFormatProvider always provides these style information as css, wether StylesExportMode is set to "Classes" or "Inline".

Instead of this...

<span style="font-style:italic">This</span> is a <span style="font-weight:bold;">teststring!</span>

...I need this:

<i>This</i> is a <b>teststring!</b>

Is there a way, using the radRichTextBox?

Kind regards,
Oliver Schmitz

answered on 19 Jul 2012, 09:07 AM

HtmlExportSettings-OnlineHelp.png

HtmlExportSettings-Class.png

Hello Mike,

thank you for your response.
Sadly, I cannot seem to find the new attribute, even though I already am using the "RadControls for WinForms Q2 2012". As you can see in the screenshots I attached, the class I see from the metadata does not provide the property ExportFontStylesAsText, like it should be according to your online documentation (screenshot #2).

I re-installed the whole RadControls package, built a new test-project vía the "Create New Telerik Project" option in VS2010 and marked Telerik.WinControls.RichTextBox in the Wizard. After adding these using directives...

using Telerik.WinControls.RichTextBox.FileFormats.Html;

using Telerik.WinControls.RichTextBox.FormatProviders.Html;

...I tried to access the new property of HtmlExportSettings, but still got the same result (the VS2010-screenshot is actually from that test).

What am I missing?

Edit:
Please disregard that last issue. I have recognized now that the property ExportFontStyleAsText is only available in the HtmlExportSettings of the RadControls for WPF. The HtmlExportSettings of the Rad Controls for WinForms don't have said property. However, according to the documentation, the functionality that would be provided by setting this property might still not be what solves my issue; I need to have ALL the formatting being done with html only, no CSS at all, since RDLC (the Dynamics NAV Reports) doesn't understand CSS so far.
--> Is it possible to have the radRichTextBox.Document being exported like this (not a file but a string)?

answered on 20 Nov 2013, 09:50 AM

We're talking about "e-mail format" HTML export, basically; styles inline, only straight body content etc.

It works pretty awesome nowadays.

I used a HtmlDataProvider bound to my string property - which is to be the e-mail content.
If you strictly want text, just use an TxtFormatProvider instead.

<telerik:HtmlDataProvider Grid.Row="3" Grid.Column="0"

x:Name="HtmlDataProvider"

Html="{Binding Content, Mode=TwoWay}"

RichTextBox="{Binding ElementName=RichTextBoxBody}"

/>

That's of course bound to my RichTextBox.
Note: Follow the tutorial about RadRichTextBoxRibbonUI if you want a toolbar interface to work with rather than starting from scratch.

What you need to do is set the FormatProvider property of this HtmlDataProvider, so it exports in the way you expect.
I initially did it in code, but should be able to bind it too for MVVM compatibility:

// Mail HTML Format

var exportSettings = new HtmlExportSettings

{

DocumentExportLevel = DocumentExportLevel.Fragment,

StylesExportMode = StylesExportMode.Inline

};

var htmlFormat = new HtmlFormatProvider { ExportSettings = exportSettings };

this.HtmlDataProvider.FormatProvider = htmlFormat;

Further more, I've extended the RadDocument to allow export as text and html, so you can just pick up an RichTextBoxEditor's native document.

public static string ToStringByTxtExport(this RadDocument document)

{

var exporter = new TxtFormatProvider();

var textValue = exporter.Export(document);

return textValue;

}

public static string ToStringByHtmlExport(this RadDocument document)

{

var exporter = new HtmlFormatProvider();

var textValue = exporter.Export(document);

return textValue;

}

public static RadDocument ToRadDocumentByTxtImport(this string value)

{

var textImporter = new TxtFormatProvider();

var document = textImporter.Import(value ?? string.Empty);

return document;

}

Enjoy

answered on 28 Apr 2014, 11:54 AM

Hi Iva

I was searching posts regarding HTML format, where I have a string which have all the tags with data as "Deepthi" stated, I am getting same format, and I wanted to get only the data without tags, I saw the reply's here and need some help, so please let me know if possible

I am using MVC , currently in "ActionResult" or Controller I am able to get data from server which is not in proper format to read(as Deepthi showed the data) so I am asking, is there any way I can convert that format into proper readable format so that ,further I need to add that data into PDF file for storing, if possible please let me know what should I do and let me know the dll and namespace for that

answered on 29 Apr 2014, 10:35 AM

Hello Manju,

This thread discusses the possible options on how you can modify the HTML generated when you export the contents of RadRichTextBox. Additionally to the previous posts I suggest you check this article where all currently available options are summarized.

When it comes to the assemblies you need, you can check this article for the assemblies needed to use RadRichTextBox, including in a scenario where you export to HTML or PDF.

I hope this helps.

Regards,
Petya
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.

answered on 29 Apr 2014, 11:02 AM

Hi Petya

Thanks for your reply, unfortunately still now I am not able to find resolution for my question, I believe I was not clear in explaining the things out, here is the scenario

Our project was in Silverlight so the question about converting RadRichTextBox to Readable format was working fine since they(I was not there at that time) used Rad control, not we are doing porting from MVVM to MVC so that it can be used in Tabs and Mobile phone too, so the value I am getting from server i.e. (just and example)

"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0
Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta
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>"

this above format is already stored in Sql, now I am trying to receive this in Controller(ActionResult) later we will be sending it into PDF file for reading and storing purpose, since I am getting this jumbled format on PDF(which I dont need), currently I am storing the above format to string variable in controller, so my question is, from the value of string variable can I able to get a valid format in MVC(not in Silverlight) so that I can store only readable file on PDF, please let me know if not understand

NOTE

I found this link from telerik which helps in converting Radtext format to Needed text, amazingly when i copy and paste the code, it generates exact information what I need!!, but I dont know how to implement in MVC to get it in Controller
Here is the link

http://demos.telerik.com/kendo-ui/web/editor/custom-tools.html

this is what I have in string variable

This format is what I need

answered on 29 Apr 2014, 11:28 AM

img1.png

img2.jpg

img1 is what I have on string variable and img2 is what I need as output

*forgot to attach file