Telerik blogs

It is not a secret that Telerik’s ASP.NET AJAX Editor is one of the most loved, top performing and frequently used Telerik controls. That is why one of our main goals is to continuously improve it and satisfy our clients’ requests for new and useful features. We keep that tradition with Q3 2012, by introducing two very powerful features:

Format Painter much like the one you've seen in MS Word®

The end user can utilize the FormatPainter tool to copy formatting from a piece of text and apply it to others in the content area of RadEditor. The tool is very similar to the FormatPainer of MS Word ®. It can be quite useful and time saving when you need to apply identical formatting to multiple sections of the edited document.

Let’s say you have spent a lot of time to create HTML elements with nice and complex formatting. Regardless of whether the formatting is applied by tags, CSS classes or inline attributes, by using the Format Painter you can quickly clone and apply it to endless new elements.

How it works

Format a section with the desired bold, italic, underline, font size, font family or other formatting tool and press the Copy Format option inside the Format Painter dropdown. This operation will save the formatting of the selected content.

To apply the saved formatting, select the text that you want to format and click the Apply Format button.

If needed, you can also reset the saved clipboard formatting by pressing the Clear Format option.

Format Painter Dropdown

Supported tags and styles:

"B", "U", "I", "STRIKE", "EM", "H1", "H2", "H3", "H4", "H5", "H6", "SUP", "SUB" "color", "font-family", "font-size", "font-style", "font-variant", "font-weight", "background-color", "background-image", "background-position", "background-repeat" and "background-attachment"

 

Markdown Import and Export

Markdown is a lightweight formatting syntax, which allows people to produce rich text markup by writing simple plain text, without the use of any XML/HTML tags and styles.  Once created, the plain text content will be exported by the Markdown converter used by RadEditor to structurally valid HTML/XHTML.

The Markdown language was originally created by John Gruber and you can find detailed information about its syntax and rules at the official site here.

Markdown Import

RadEditor offers two ways to import Markdown content:

  1. The provided Paste Markdown dialog (see the screenshot below) – you can write or paste the markdown text in the textarea inside the popup and press the Paste button to insert the plain text as XHTML into the content area:
    Paste Markdown Dialog
  2. The other way is via RadEditor’s client-side API and the Telerik.Web.UI.Editor.Markdown.Converter(). makeHtml() method:
    var converter = new Telerik.Web.UI.Editor.Markdown.Converter();
    //set the converted Markdown content in the editor
    editor.set_html(converter.makeHtml(“This is a paragraph with **bold** and *italic* words.”));

Markdown export

To export HTML/XHTML content to a text file with markdown syntax is straightforward and requires the execution of RadEditor’s ExportToMarkdown() server-side method. Once fired, this method will prompt the user to choose between directly opening or saving the produced text file.
An alternative approach is using the OnExportContent server event, which allows you to silently export the markdown plain text to the server without any indication to the client.

For more information you can visit Export to Markdown Live demo and try to insert Markdown content and export it to a text file.

Give it a try

You can check out the live demo of the FormatPainter tool here and give it a spin. Feel free to post a comment below if you like or just have a suggestion for new features that you would like to see implemented in the upcoming versions of RadEditor.


Marin Bratanov
About the Author

Marin Bratanov

Marin Bratanov was a Principal Technical Support Engineer in the Blazor division.

Related Posts

Comments

Comments are disabled in preview mode.