Telerik Forums / UI for Silverlight Forum / RichTextBox /

HTML Output from RadRichTextbox

Telerik UI for Silverlight
Resources Buy Try

27 posts, 1 answers

Deepthi

11 posts

Member since:
Jan 2011

Posted 04 Jan 2011 Link to this post

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

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
Answer
Iva Toteva
Admin

1319 posts

Posted 05 Jan 2011 Link to this post

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

Deepthi

11 posts

Member since:
Jan 2011

Posted 06 Jan 2011 Link to this post

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

Deepthi

11 posts

Member since:
Jan 2011

Posted 06 Jan 2011 Link to this post

Hi Iva,
I got the latest v3.0 and now it works fine.
Another question: We want to insert image by giving absolute url like http://xxx/image1.jpg in the RadRichtextbox( similar to insert image functionality in the AjaxRadEditor) . Is there any option for this?
Iva Toteva
Admin

1319 posts

Posted 07 Jan 2011 Link to this post

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
Deepthi

11 posts

Member since:
Jan 2011

Posted 10 Jan 2011 Link to this post

Hi Iva,

Is there a possibility in RadRichTextbox for the user to enter absolute uri from the UI and on converting to html, it should give me an output like this:

<p><img width="400" height="300" class="float_right" style="border: 0px solid;" alt="Lakers Nike Sneakers Christmas NBA Basketball Grinch" src="http://static.businessinsider.com/image/4d17b3254bd7c8df6e1a0000-400-300/lakers-nike-sneakers-christmas-nba-basketball-grinch.jpg" /></p>

Thanks,
Deepthi
Iva Toteva
Admin

1319 posts
Posted 12 Jan 2011 Link to this post

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>>
Deepthi

11 posts

Member since:
Jan 2011

Posted 13 Jan 2011 Link to this post

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
Iva Toteva
Admin

1319 posts
Posted 19 Jan 2011 Link to this post

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

InsertCustomControl.zip
Oliver

3 posts

Member since:
Jul 2012

Posted 16 Jul 2012 Link to this post

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
Mike
Admin

640 posts

Posted 18 Jul 2012 Link to this post

Hello Oliver Schmitz,

In Q1 2012 we introduced a property of HtmlExportSettings - ExportFontStylesAsTags that does just what you need in regard to exporting <b> <I> and <font> tags instead of inline Style.

Let us know if this helped.

Greetings,
Mike
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Oliver

3 posts

Member since:
Jul 2012
Posted 19 Jul 2012 Link to this post

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)?

HtmlExportSettings-Class.png

HtmlExportSettings-OnlineHelp.png
Svett
Admin

728 posts

Posted 23 Jul 2012 Link to this post

Hi Oliver,

Presently, you cannot achieve the desired scenario with RadRichTextBox for Winforms. We will consider your requirement as feature request. If many customers require it, we will increase its priority in our task list. You can vote for the feature here.

I updated your Telerik points accordingly.

Greetings,
Svett
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Aicha

4 posts

Member since:
Jan 2013

Posted 18 Jan 2013 Link to this post

Thank you for providing us this code :
"
"HtmlExportSettings exportSettings = new HtmlExportSettings();

exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment; exportSettings.StyleExportMode = StylesExportMode.Inline;

HtmlFormatProvider formatProvider = new HtmlFormatProvider();

formatProvider.ExportSettings = exportSettings;

.. formatProvider.Export(document); ...
"

But I want to get only the text inside the body without styles tags,
any idea please ?
Thank you!
Aicha

4 posts

Member since:
Jan 2013

Posted 18 Jan 2013 Link to this post

Hello, I have found the solution here
http://stackoverflow.com/questions/6335835/get-text-value-in-a-radrichtextbox
Aicha.
Marcin

195 posts

Member since:
Jan 2011

Posted 25 Jun 2013 Link to this post

I'm trying to achieve to have font tag instead of style for text-color and background -color. However if I set ExportFontStylesAsTags to true font tag is still not generated. Is it even possible to have font tag?
Mihail
Admin

268 posts

Posted 28 Jun 2013 Link to this post

Hello Marcin,
Unfortunately, you can't export font tags at this stage.

Could you give us more details on why you need the font tags to specify the colors instead of the current structure? We gather this information in order to better understand the needs of our clients and how they use our products so we can improve them.

Looking forward to your reply.

Regards,
Mihail
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Marcin

195 posts

Member since:
Jan 2011

Posted 28 Jun 2013 Link to this post

Hello,
I'm using editor for simple formatting - to use e.g in mobile application (android). TextView is not supporting styles only simple tags. Also I'm missing size tags like e.g. small.

I know html editor is not what Rich Editor for, but this is pitty in fact. There is no such editor at all on the market. There is no way simulate editing of html without embedding any kind of web browser, which is quite painful.
Boby
Admin

763 posts

Posted 02 Jul 2013 Link to this post

Hi Marcin,
Thank you for the additional details. We will review them when evaluating your feature request.

Unfortunately the main focus of RadRichTextBox's export to HTML is to preserve as much as possible of the document structure, and this conflicts with preserving of the original imported content.

Regards,
Boby
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Kobus

2 posts

Member since:
Mar 2013

Posted 04 Oct 2013 Link to this post

Hi.

Please give me a example for this in vb.net

Regards
Bernhard

22 posts

Member since:
Jul 2013

Posted 05 Oct 2013 Link to this post

Hi, maybe this works for you:
http://converter.telerik.com/

;-)
tomcrusader

14 posts

Member since:
Jul 2009

Posted 20 Nov 2013 Link to this post

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
Manju

6 posts

Member since:
Apr 2014

Posted 28 Apr 2014 in reply to Iva Toteva Link to this post

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
Petya
Admin

990 posts

Posted 29 Apr 2014 Link to this post

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.
Manju

6 posts

Member since:
Apr 2014

Posted 29 Apr 2014 in reply to Petya Link to this post

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
Manju

6 posts

Member since:
Apr 2014
Posted 29 Apr 2014 in reply to Manju Link to this post

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

*forgot to attach file

img2.jpg

img1.png
Petya
Admin

990 posts

Posted 30 Apr 2014 Link to this post

Hello,

You can host a Silverlight user control in MVC, there are many resources on the Internet which can help you with this task. Other than using RadRichTextBox, I'm afraid we are unable to provide advice on a control which you can utilize.

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.

HTML Output from RadRichTextbox

Deepthi

Iva Toteva

Deepthi

Deepthi

Iva Toteva

Deepthi

Iva Toteva

Deepthi

Iva Toteva

Oliver

Mike

Oliver

Svett

Aicha

Aicha

Marcin

Mihail

Marcin

Boby

Kobus

Bernhard

tomcrusader

Manju

Petya

Manju

Manju

Petya