Hello!
I'm trying to convert a little .aspx page to a WPF window.
In the .aspx page I have a simple .NET RadEditor that allows me to edit a small text, adding and removing html tag very easily.
As said, I'd like to reproduce the same behaviuor inside a WPFwindow.
Following the official documentation provided, the best solution I found is a combination of a RadRichTextBox and a RadRichTextBoxUIRibbon.
I've spent many hours trying to get the same result, but I couldn't figure it out.
For example, if I write the word "This is a test" in the RadEditor, then select the whole sentence, and press on the "B" button (B for Bold), the result that I achieve when I read the textbox inside the editor is "<strong>This is a Test</strong>". This is perfect!
But if I try to do the same thing inside the RadRichTextBox, using the "B" Button in the RadRichTextBoxRibbonUI, when I export the content of the Document using the provided HtmlFormatProvider the result I get is very different, as I get something like a whole HTML page:
<!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">
p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; }
body { font-family: 'Verdana';font-style: Normal;font-weight: normal;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; }
.s_6C8EFA9D { telerik-style-type: local;font-weight: bold; } </style></head><body><p class="Normal "><span class="s_6C8EFA9D">This is a Test</span></p></body></html>
Am I wrong with the configuration? If any other solution exists, I'll be glad to implement it, even if it means to change the whole page logic.
Thank you!
Damiano
4 Answers, 1 is accepted
Hi Damiano,
Indeed, you can achieve the desired functionality using the WPF RichTextBox control.
By default, the HtmlFormatProvider exports the content of the RichTextBox as a complete document and this is the reason for the observed output.
In order to choose which elements to be exported to the HTML string, you can use HtmlFormatProvider`s ExportSettings API to pass an instance of HtmlExportSettings with the specific settings set. Check the following code snippet:
HtmlFormatProvider provider = new HtmlFormatProvider();
HtmlExportSettings settings = new HtmlExportSettings
{
ExportBoldAsStrong = true,
DocumentExportLevel = DocumentExportLevel.Fragment,
ExportFontStylesAsTags = true,
ExportLocalOrStyleValueSource = true,
StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles,
StylesExportMode = StylesExportMode.Inline
};
provider.ExportSettings = settings;
string html = provider.Export(this.radRichTextBox.Document);More information you can find in the HtmlFormatProvider`s Settings help article.
I hope this helps. Please, let me know if there is anything else I can assist you with.
Regards,
Martin
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi Martin, thank you for the quick reply!
I've almost achieved the desired result.
Following your solution, and adding these simple lines of code
List<string> propertiesToIgnoreP = new List<string> { "margin-top", "margin-bottom" };List<string> propertiesToIgnoreSpan = new List<string> { "font-family", "font-size" }; settings.PropertiesToIgnore["p"].AddRange(propertiesToIgnoreP); settings.PropertiesToIgnore["span"].AddRange(propertiesToIgnoreSpan);
I get this output: <p><strong>This is a Test</strong></p>.
Is there a way to get rid of the tag <p> (or more generically, is it possibile to avoid the export of specific kinds of tag)?
Thanks again!
Damiano
Hello Damiano,
I am happy this approach is helping you to achieve the desired functionality.
The HtmlExportSettings currently does not provide such an option, thus I logged a feature request in our backlog: RichTextBox: Provide an option in the HtmlExportSettings to skip paragraph tags on export. You can cast your vote for the implementation as well as subscribe to the task by clicking the Follow button so you can receive updates when its status changes.
In appreciation for bringing this to our attention, I updated your Telerik points.
Until this feature is developed, I could suggest using the System.Replace() method in order to remove the unwanted paragraph tags:
html = html.Replace("<p>", string.Empty).Replace("</p>", string.Empty);I hope this helps. Please, let me know if there is anything else I can assist you with.
Regards,
Martin
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Good morning Martin!
While I was waiting for your answer, I had your same idea! :-)
This is what I did yesterday:
string output = provider.Export(rtb.Document).Replace("<p>",string.Empty).Replace("</p>", string.Empty).Replace("<strong></strong>", string.Empty).Replace("<i></i>", string.Empty).Replace("<u></u>", string.Empty).Replace("<em></em>", string.Empty);I had to add other replaces because I found out that if I try to add and immediatly remove a <strong> tag, for example, the Export method leaves this strange markup: "This is a Test<strong></strong>".
This should be a good workaround!
Thanks for your help!
Damiano