Hi
We have two applications, one is WPF application that reads some RadDocument (see below) and displays it to the screen in non-paged format (layoutMode=flow). The user can then edit it via a RadRichTextEditor, and when they save it, the output is saved in DB.
Then We have a ASP.NET MVC application that does the same thing, but converts it to Html first. But when the converter (seen below) tries to make RadDocument out of it, it adds all kinds of extra styling and changes it to paged instead of flow layoutMode.
This is not what we want, but we cannot figure out how to avoid this behavior.
Here's a concrete example:
These are the two methods we use to convert From and to Html.
private string RadDocToHTMLConverter(string radDoc) {
RadDocument doc = RadDocumentExtention.ToRadDocument(radDoc);
var RTB_Provider = new Telerik.Windows.Documents.FormatProviders.OpenXml.Docx.DocxFormatProvider();
var flow_Provider = new Telerik.Windows.Documents.Flow.FormatProviders.Docx.DocxFormatProvider();
var doc_bytes = RTB_Provider.Export(doc);
var flowDocuemnt = flow_Provider.Import(doc_bytes);
string html = new HtmlFormatProvider().Export(flowDocuemnt);
return html;
}
private string HTMLtoRadDocStringConverter(string html) {
var RTB_Provider = new Telerik.Windows.Documents.FormatProviders.OpenXml.Docx.DocxFormatProvider();
var flow_Provider = new Telerik.Windows.Documents.Flow.FormatProviders.Docx.DocxFormatProvider();
var flowDocuemnt = new HtmlFormatProvider().Import(html);
var doc_bytes = flow_Provider.Export(flowDocuemnt);
var rtbDoc = RTB_Provider.Import(doc_bytes);
return rtbDoc.ToStr();
}The problem occurs when the input html string is put through the HtmlFormatProvider.
Example of data to and from DB:
This is what we get FROM our DB that then needs to be converted to html for display on mvc page:
<t:RadDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:t="clr-namespace:Telerik.Windows.Documents.Model;assembly=Telerik.Windows.Documents" xmlns:s="clr-namespace:Telerik.Windows.Documents.Model.Styles;assembly=Telerik.Windows.Documents" xmlns:r="clr-namespace:Telerik.Windows.Documents.Model.Revisions;assembly=Telerik.Windows.Documents" xmlns:n="clr-namespace:Telerik.Windows.Documents.Model.Notes;assembly=Telerik.Windows.Documents" xmlns:th="clr-namespace:Telerik.Windows.Documents.Model.Themes;assembly=Telerik.Windows.Documents" version="1.4" LayoutMode="Flow" LineSpacing="1.14999997615814" LineSpacingType="Auto" ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0" StyleName="defaultDocumentStyle">
<t:RadDocument.Captions>
<t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Figure" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
<t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Table" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
</t:RadDocument.Captions>
<t:RadDocument.ProtectionSettings>
<t:DocumentProtectionSettings EnableDocumentProtection="False" Enforce="False" HashingAlgorithm="None" HashingSpinCount="0" ProtectionMode="ReadOnly" />
</t:RadDocument.ProtectionSettings>
<t:RadDocument.Styles>
<s:StyleDefinition DisplayName="Document Default Style" IsCustom="False" IsDefault="False" IsPrimary="True" Name="defaultDocumentStyle" Type="Default">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties LineSpacing="1.14999997615814" SpacingAfter="0" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontFamily="Verdana" FontSize="10.6700000762939" FontStyle="Normal" FontWeight="Normal" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Normal" IsCustom="False" IsDefault="True" IsPrimary="True" Name="Normal" Type="Paragraph" UIPriority="0" />
<s:StyleDefinition DisplayName="Table Normal" IsCustom="False" IsDefault="True" IsPrimary="False" Name="TableNormal" Type="Table" UIPriority="59">
<s:StyleDefinition.TableStyle>
<s:TableProperties CellPadding="5,0,5,0">
<s:TableProperties.TableLook>
<t:TableLook />
</s:TableProperties.TableLook>
</s:TableProperties>
</s:StyleDefinition.TableStyle>
</s:StyleDefinition>
</t:RadDocument.Styles>
<t:Section>
<t:Paragraph>
<t:Span FontWeight="Bold" Text="" />
<t:Span Text=" " />
</t:Paragraph>
<t:Paragraph>
<t:Paragraph.ParagraphSymbolPropertiesStyle>
<s:SpanProperties FlowDirection="LeftToRight" />
</t:Paragraph.ParagraphSymbolPropertiesStyle>
<t:Span FontWeight="Bold" Text="" />
<t:Span Text=" " />
</t:Paragraph>
</t:Section>
</t:RadDocument>Then we convert it to html, (this works as expected) and displayed..
Then without editing anything but simply pressing save, taking the result of Kendo.Editor(), we get some html string that we put into the converter and get THIS result:
<t:RadDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:t="clr-namespace:Telerik.Windows.Documents.Model;assembly=Telerik.Windows.Documents" xmlns:s="clr-namespace:Telerik.Windows.Documents.Model.Styles;assembly=Telerik.Windows.Documents" xmlns:r="clr-namespace:Telerik.Windows.Documents.Model.Revisions;assembly=Telerik.Windows.Documents" xmlns:n="clr-namespace:Telerik.Windows.Documents.Model.Notes;assembly=Telerik.Windows.Documents" xmlns:th="clr-namespace:Telerik.Windows.Documents.Model.Themes;assembly=Telerik.Windows.Documents" version="1.4" LayoutMode="Paged" LineSpacing="1" LineSpacingType="Auto" ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0" StyleName="defaultDocumentStyle">
<t:RadDocument.Captions>
<t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Figure" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
<t:CaptionDefinition IsDefault="True" IsLinkedToHeading="False" Label="Table" LinkedHeadingLevel="0" NumberingFormat="Arabic" SeparatorType="Hyphen" />
</t:RadDocument.Captions>
<t:RadDocument.ProtectionSettings>
<t:DocumentProtectionSettings EnableDocumentProtection="False" Enforce="False" HashingAlgorithm="None" HashingSpinCount="0" ProtectionMode="ReadOnly" />
</t:RadDocument.ProtectionSettings>
<t:RadDocument.Styles>
<s:StyleDefinition DisplayName="Document Default Style" IsCustom="False" IsDefault="False" IsPrimary="True" Name="defaultDocumentStyle" Type="Default">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties FirstLineIndent="0" LeftIndent="0" LineSpacing="1" RightIndent="0" SpacingAfter="0" SpacingBefore="0" TextAlignment="Left" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FlowDirection="LeftToRight" FontFamily="Verdana" FontSize="10.67" FontStyle="Normal" FontWeight="Normal" ForeColor="#FF000000" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Heading 3" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading3Char" Name="Heading3" NextStyleName="Normal" Type="Paragraph" UIPriority="9">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties KeepLines="True" OutlineLevel="3" SpacingAfter="0" SpacingBefore="13.3333330154419" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontWeight="Bold" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Heading 3 Char" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading3" Name="Heading3Char" Type="Character">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontWeight="Bold" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Heading 4" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading4Char" Name="Heading4" NextStyleName="Normal" Type="Paragraph" UIPriority="9">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties KeepLines="True" OutlineLevel="4" SpacingAfter="0" SpacingBefore="13.3333330154419" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" FontWeight="Bold" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Heading 4 Char" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading4" Name="Heading4Char" Type="Character">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" FontWeight="Bold" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Heading 5" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading5Char" Name="Heading5" NextStyleName="Normal" Type="Paragraph" UIPriority="9">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties KeepLines="True" OutlineLevel="5" SpacingAfter="0" SpacingBefore="13.3333330154419" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Heading 5 Char" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading5" Name="Heading5Char" Type="Character">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Heading 6" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading6Char" Name="Heading6" NextStyleName="Normal" Type="Paragraph" UIPriority="9">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties KeepLines="True" OutlineLevel="6" SpacingAfter="0" SpacingBefore="13.3333330154419" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Heading 6 Char" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading6" Name="Heading6Char" Type="Character">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" ForeColor="#FF4F81BD" ThemeFontFamily="major" ThemeForeColor="accent1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Heading 7" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading7Char" Name="Heading7" NextStyleName="Normal" Type="Paragraph" UIPriority="9">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties KeepLines="True" OutlineLevel="7" SpacingAfter="0" SpacingBefore="13.3333330154419" />
</s:StyleDefinition.ParagraphStyle>
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" ForeColor="#FF000000" ThemeFontFamily="major" ThemeForeColor="text1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Heading 7 Char" IsCustom="False" IsDefault="False" IsPrimary="False" LinkedStyleName="Heading7" Name="Heading7Char" Type="Character">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontStyle="Italic" ForeColor="#FF000000" ThemeFontFamily="major" ThemeForeColor="text1" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Normal" IsCustom="False" IsDefault="True" IsPrimary="True" Name="Normal" Type="Paragraph" UIPriority="0">
<s:StyleDefinition.SpanStyle>
<s:SpanProperties FontSize="16" />
</s:StyleDefinition.SpanStyle>
</s:StyleDefinition>
<s:StyleDefinition BasedOnName="Normal" DisplayName="Normal (Web)" IsCustom="False" IsDefault="False" IsPrimary="False" Name="NormalWeb" Type="Paragraph" UIPriority="99">
<s:StyleDefinition.ParagraphStyle>
<s:ParagraphProperties AutomaticSpacingAfter="True" AutomaticSpacingBefore="True" SpacingAfter="6.66666650772095" SpacingBefore="6.66666650772095" />
</s:StyleDefinition.ParagraphStyle>
</s:StyleDefinition>
<s:StyleDefinition DisplayName="Table Normal" IsCustom="False" IsDefault="True" IsPrimary="False" Name="TableNormal" Type="Table" UIPriority="59">
<s:StyleDefinition.TableStyle>
<s:TableProperties CellPadding="7,0,7,0">
<s:TableProperties.TableLook>
<t:TableLook />
</s:TableProperties.TableLook>
</s:TableProperties>
</s:StyleDefinition.TableStyle>
</s:StyleDefinition>
</t:RadDocument.Styles>
<t:Section>
<t:Paragraph StyleName="NormalWeb">
<t:Span FontWeight="Bold" Text="" />
<t:Span Text=" " />
<t:Span FontWeight="Normal" Text="" />
</t:Paragraph>
<t:Paragraph StyleName="NormalWeb">
<t:Span FontWeight="Bold" Text="" />
<t:Span FontWeight="Normal" Text="" />
</t:Paragraph>
<t:Paragraph StyleName="NormalWeb">
<t:Span FontWeight="Normal" Text="" />
</t:Paragraph>
<t:Paragraph StyleName="NormalWeb">
<t:Span FontWeight="Bold" Text="" />
</t:Paragraph>
</t:Section>
</t:RadDocument>There are many issues here.
1. It has created LayoutMode to Paged instead of Flow, which looks wrong in the context we are using this for.
2. It adds all kinds of extra style like "NormalWeb" that we dont want or need. Makes the text bigger and adds margins, paddings and stuff that we dont want.
3. the converter code has barely any options or settings available, and the documentation is lacking at best.
The result we want to get out is the same as the original, so both applications can use it. Afterall we didn't edit anything, just converted it to and from html. Aka From RadDoc -> html -> RadDoc. So it should be the same, before and after.
HOW, can we fix this? If you could also provide examples, that would be great.
1 Answer, 1 is accepted
Hello Attila,
RadRichTextBox has a HtmlFormatProvider and you can directly use it to export/import the HTML. This way you will not need to convert to/from docx, which is a completely different format. I have tested this with your file and the results look OK in the RichTextBox.
private void Button_Click(object sender, RoutedEventArgs e)
{
string html = RadDocToHTMLConverter(radRichTextBox.Document);
radRichTextBox.Document = HTMLtoRadDocStringConverter(html);
}
private string RadDocToHTMLConverter(RadDocument radDoc)
{
RadDocument doc = radDoc;
string html = new Telerik.Windows.Documents.FormatProviders.Html.HtmlFormatProvider().Export(doc);
return html;
}
private RadDocument HTMLtoRadDocStringConverter(string html)
{
var rtbDoc = new Telerik.Windows.Documents.FormatProviders.Html.HtmlFormatProvider().Import(html);
return rtbDoc;
}
In addition, you can set several settings in order to tweak the result. Detailed information is available in the following article: Settings.
Let me know how this works for you.
Regards,
Dimitar
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
Iron
Iron
I see..
Unfortunately if it had been so simple then i already had the code needed.
The RadDoc needs to be converted to string.
So:
var result = new Telerik.Windows.Documents.Flow.FormatProviders.Html.HtmlFormatProvider().Import(html);
result is a RadFlowDocument. and actually the namespace Telerik.Windows.Documents.FormatProviders.Html.HtmlFormatProvider()
Doesn't exist. Must be a WPF only library.
So knowing that I am Holding a RadFlowDocument, and i want to convert it to a string, like the input. What do I do now?
Hi Attila,
I do not understand why you need to use RadFlowDocument and I still do not think that this is needed. I have attached a small sample project that shows all required assemblies and namespaces (the Telerik.Windows.Documents.FormatProviders.Html assembly contains the provider). It is a WPF application. The RichtextBox supports various formats that can be converted without using RadFlowDocument.
Rank 1
Iron
Iron
:) I'm sorry. I must have been unclear.
MY usecase:
1. I am working in an MVC project. (no problem)
2. There, I am fetching a string from the database, that needs to be put into the rich text editor. (no problem)
3. Then when the User edits the text in the rich text editor and presses a save button. (no problem)
4. The javascript picks up the content of the rich text editor and sends it to a Controller action. (no problem)
5. The Controller action sends the string, from the rich text editor (containing HTML), to the "HTMLtoRadDocStringConverter(string html)" method. AND asks for a string in return. (look at the code from the question). (no problem)
6. The HtmlFormatProvider().Import(html) returns a RadFlowDocument, because the namespace "Telerik.Windows.Documents.FormatProviders.Html" doesn't contain any format providers. Atleast not when i try from my MVC project. So I'm forced to use the RadFlowDocument, which is fine, because it does the job, but i need to convert it to string, without using the Docx format provider. (somehow). <-- this is where i need help
7. When the conversion is done, the HTMLtoRadDocStringConverter(string html) should return a string that looks like the one from my question. With <t:RadDocument bla bla bla> and layoutMode="flow" like before and none of those paged settings, font changes, font size changes etc.. <-- and here
8. the string is saved in the DB, for later use. (no problem)
Hope this can help make my question easier to understand.
Hi Attila,
Thank you for the detailed explanation. However, I still believe that the suggested approach in my previous post is suitable and should work for your case (point 6). Perhaps it would be better to open a new support ticket and attach your project or a sample project that reproduces your scenario. This way I will be able to understand what prevents you from using the suggested approach and see if there is another solution to this.
Thank you in advance for your patience and cooperation.