New Html Editor Control in Silverlight Elements

One of the controls you’ll find in our Silverlight Elements control suite is a rich text editor that can export the rich text input as HTML code. We are pleased to announce that this control has recently been given a makeover to fix various bugs, greatly improve the performance and add a couple of new features!

Html Rich Text Editor

For those of you who haven’t seen this control before, here is a brief run down about the rich formatting features that this control supports. Rich formatting includes bold, italic, underline, foreground color, background color, font-family and font size. Rich formatting can be applied or removed by selecting text and using the appropriate control in the toolbar. Adding, editing and removing hyperlinks can be done using the buttons with the familiar chain link icon. When pressing the hyperlink button, users will be presented with a dialog for inputting the url.

Hyperlink Dialog

The text alignment of individual paragraphs can be set as either left, center, right or justify aligned. Users can add new paragraphs by pressing the Enter key. Line breaks can be added using the Shift+Enter keys. And finally, there is support for adding ordered and unordered lists. Unordered list items can be decorated with either square, round or disc bullets. Ordered lists support some of the common html list style types including decimals, leading zeros, alphabet characters and Roman numerals in both lower and upper case.

Lists

The control includes API for exporting the rich text as HTML, and also importing HTML to be displayed as the equivalent rich text. And of course there are many of the features that you would expect in any text editor such as Cut, Copy, Paste, Mouse selection and keyboard navigation including Home, End, Ctrl+Home, Shift+Up etc.

Improvements and new features
As mentioned before we have fixed many bugs and greatly improved the performance of this control. One of the first new features you may notice is the support for justify alignment. Justify alignment puts extra spacing between words so that each line evenly fills to the right edge of the editor. This is demonstrated in the image below The rich text editor now has scroll bars built into the default style. So if you have used this control before, you will no longer need to put the text editor into a scroll viewer.

Justify Alignment

API changes
Unfortunately in order to improve this control some API changes were made. Most of the methods on the control itself have now been moved to the RichDocument class. The current RichDocument for the control can be obtained through the RichTextEditor.Document property. The properties and methods related to html export and import have not changed. If you are having trouble finding a method that you used to use, let us know in our forum and we’ll help you out.

How to use it
There are 2 controls involved in adding the html editor in your applications. First off is the RichTextEditor. This manages all the rich text rendering and text input. Then there is the StandardRichTextEditorToolBar which provides the rich formatting UI controls. A typical way to set up these controls is shown in the following code example:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <ms:StandardRichTextEditorToolBar Editor="{Binding ElementName=TextEditor}" />
  <ms:RichTextEditor x:Name="TextEditor" Grid.Row="1" />
</Grid>

The important thing to note here is setting the Editor property of the StandardRichTextEditorToolBar. This allows the tool bar to hook into the editor and apply formatting to the selected text. Exporting and importing HTML is as simple as reading the Html property or calling the LoadHtml method on the RichTextEditor control respectively.

Take it for a spin
The great news is that the new and improved HTML editor control is available right now! Head over to the downloads page to get the latest nightly build of the trial version, or visit your account page if you’re already a customer. Got any questions or feature requests for the HTML editor? We’d love to hear from you in the forum.

One Response to “New Html Editor Control in Silverlight Elements”

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top