Importing/Exporting HTML
This requires version 4.9 of the Liquid Controls Library, you can download the dll for free from the Downloads link above.
Contained in the liquid.dll under the Liquid.Components namespace is a class which several useful static methods for converting RichText to and from HTML. The conversion is far from complete and is specifically designed for use with the our Silverlight RichTextBox control, the conversion from HTML to RichText where the HTML provided was originally generated from RichText will give perfect results. HTML that has either been modified from a previous conversion or is completely new cannot be guaranteed to convert, certainly a source dump of a web page will not work.
Converting from RichText to HTML
The Liquid.Components.Html class contains a static method for this purpose:
public static string ConvertRichTextToHTMLDocument(string richTextXML, string baseImageURL)
public static string[] ConvertRichTextToHTML(string richTextXML, string baseImageURL)
The 1st method ConvertRichTextToHTMLDocument will return a skeleton HTML document with the bare minimum in terms of HTML tags, enough to copy and paste the output into a blank HTML document and be able to view it straight away.
The 2nd method ConvertRichTextToHTML will convert the RichText and return an array with 2 elements. The first element will contain the CSS styles and the second element will contain the actual HTML.
The online RichTextBox example can be used to test exporting HTML, in the screenshot below we export a snippet of RichText consisting of one heading and a line of text.
Converting from HTML to RichText
The basic requirements for converting a block of HTML to RichText is as follows:
- All tags are well formed.
- Your CSS styles are included in the same HTML file and not separate CSS files.
- The CSS is contained within the <styles> tag, which in turn is contained within the <head> tag.
- The HTML is contained within the <body> tag.
Ensuring the HTML is well formed is very important as it is parsed by an XML reader and HTML with missing or incorrectly closed tags will result in exceptions. An example of a simple HTML document that could be imported would be:
<html>
<head>
<style>
.BoldText {font-weight:bold;}
</style>
</head>
<body>
<p>This is a simple HTML import!</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<p class="BoldText">Formatting must be done through CSS classes.</p>
<p style="font-weight:bold">Inline styles are not supported.</p>
</body>
</html>
The online RichTextBox example can be used to test importing HTML.
As you can see if you attempt to import the above into the RichTextBox using our online example you will notice the text with the class contains the correct styling after importation, however the text with the inline style is rendered without any bold styling. It is also important to note that only a few CSS style commands and possible values are accepted during the conversion, these are as follows:
- font-family:Any Silverlight Font
- font-size:Npx
- text-align:left|center|right
- color:#RGB
- font-weight:bold
- text-decoration:underline
- font-style:Italic
- vertical-align:Sub|Super
There are lots of possibilities for using the RichTextBox in HTML editing scenarios and it won't be long before we start seeing Silverlight powered forums and CMS systems.
Your Comments and Questions Answered
You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!