The Paragraph style dropdown of RadEditor displays a predefined set of styles by default. This set is defined by the Paragraphs collection. You can add items to the Paragraphs collection declaratively, programmatically and via the ToolsFile.
Using the Paragraphs Collection Declaratively:
<telerik:RadEditor ID="Radeditor1" runat="server">
<Paragraphs>
<telerik:EditorParagraph Title="Clear Formatting" Tag="<body>"/>
<telerik:EditorParagraph Title="<H1>Heading 1</H1>" Tag="<H1>"/>
<telerik:EditorParagraph Title="<H2 style='font-family: Trebuchet MS;'>Heading 2</H2>" Tag="<H2 style='font-family: Trebuchet MS;'>"/>
<telerik:EditorParagraph Title="<H3 class='serif'>Heading 3</H3>" Tag="<H3 class='serif'>"/>
</Paragraphs>
</telerik:RadEditor>
It is possible to style the dropdown items by:
- defining a global heading style on the page with the editor, e.g.
<style type="text/css">
h1
{
font-family: Garamond, Helvetica, "Times New Roman", "Nueva Roman", Serif;
font-weight: normal;
padding: 0 4px;
}
<style>
Please keep in mind that global CSS selectors (e.g. h1, h2, h3,...,h6, p, table, td, li, ul, div) are not recommended because they could break the appearance of third party controls and the page. This is the case with the "Editor / Paragraph Styles" and "editor/examples/formatblock" strings in this demo where they are shown with italic style and this is not corrected on purpose so that this side effect is visible.
- setting an inline style to the item title and tag attributes, e.g.
<telerik:EditorParagraph Title="<H2 style='font-family: Trebuchet MS;'>Heading 2</H2>" Tag="<H2 style='font-family: Trebuchet MS;'>"/>
- setting a css class name to the item's title and tag attribute:
<telerik:EditorParagraph Title="<H3 class='serif'>Heading 3</H3>" Tag="<H3 class='serif'>"/>
Using Paragraphs Programmatically (using default and custom css class and inline styles)::
To add Paragraph styles programmatically use the Add() method of the Paragraphs collection. When using the Add() method the Paragraph style dropdown will be reset, so the items you add will create a new Paragraph style set. See the example below:
C#
Radeditor1.Paragraphs.Add("<h1>Heading 1<h1>", "<h1>");
Radeditor1.Paragraphs.Add("<h2 style='font-family: Trebuchet MS;'>Heading 2<h2>", "<h2 style='font-family: Trebuchet MS;'>");
Radeditor1.Paragraphs.Add("<h3 class='serif'>Heading 3<h3>", "<h3 class='serif'>");
VB.NET
Radeditor1.Paragraphs.Add("<h1>Heading 1<h1>", "<h1>")
Radeditor1.Paragraphs.Add("<h2 style='font-family: Trebuchet MS;'>Heading 2<h2>", "<h2 style='font-family: Trebuchet MS;'>")
Radeditor1.Paragraphs.Add("<h3 class='serif'>Heading 3<h3>", "<h3 class='serif'>")
Using the ToolsFile
You can also populate the Paragraphs dropdown using the ToolsFile.xml, as shown in the example below (using default and custom class styles):
<?xml version="1.0" encoding="utf-8" ?>
<root>
<tools name="MainToolbar">
<tool name="FormatBlock"/>
</tools>
<paragraphs>
<paragraph name="<H1>Heading 1</H1>" value="<H1>"/>
<paragraph name="<H2 style='font-family: Trebuchet MS;'>Heading 2</H2>" value="<H2 style='font-family: Trebuchet MS;'>"/>
<paragraph name="<H3 class='serif'>Heading 3</H3>" value="<H3 class='serif'>"/>
</paragraphs>
</root>
Note that the opening < tag symbol should be replaced by the < entity in the XML ToolsFile file.
Related Resources