HTML Output from RadRichTextbox

27 posts, 1 answers
  1. Deepthi
    Deepthi avatar
    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\">&nbsp;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

  2. Answer
    Iva Toteva
    Admin
    Iva Toteva avatar
    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
  3. DevCraft banner
  4. Deepthi
    Deepthi avatar
    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

  5. Deepthi
    Deepthi avatar
    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?
  6. Iva Toteva
    Admin
    Iva Toteva avatar
    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:

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

  8. Iva Toteva
    Admin
    Iva Toteva avatar
    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">
      ***
    </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>>
  9. Deepthi
    Deepthi avatar
    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
  10. Iva Toteva
    Admin
    Iva Toteva avatar
    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>>
  11. Oliver
    Oliver avatar
    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
  12. Mike
    Admin
    Mike avatar
    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.

  13. Oliver
    Oliver avatar
    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)?
  14. Svett
    Admin
    Svett avatar
    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.

  15. Aicha
    Aicha avatar
    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!
  16. Aicha
    Aicha avatar
    4 posts
    Member since:
    Jan 2013

    Posted 18 Jan 2013 Link to this post

  17. Marcin
    Marcin avatar
    165 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?
  18. Mihail
    Admin
    Mihail avatar
    192 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 >>
  19. Marcin
    Marcin avatar
    165 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.
  20. Boby
    Admin
    Boby avatar
    595 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 >>
  21. Kobus
    Kobus avatar
    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
  22. Bernhard
    Bernhard avatar
    22 posts
    Member since:
    Jul 2013

    Posted 05 Oct 2013 Link to this post

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

    ;-)
  23. tomcrusader
    tomcrusader avatar
    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
  24. Manju
    Manju avatar
    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
  25. Petya
    Admin
    Petya avatar
    975 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.
     
  26. Manju
    Manju avatar
    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\">&nbsp;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


  27. Manju
    Manju avatar
    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
  28. Petya
    Admin
    Petya avatar
    975 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.
     
Back to Top
DevCraft banner