Editor - Paragraph Styles

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>"/>
        <
paragraph name="&lt;H2 style='font-family: Trebuchet MS;'>Heading 2&lt;/H2>" value="&lt;H2 style='font-family: Trebuchet MS;'>"/>
        <
paragraph name="&lt;H3 class='serif'>Heading 3&lt;/H3>" value="&lt;H3 class='serif'>"/>
    </
paragraphs>
</root>

Note that the opening < tag symbol should be replaced by the &lt; entity in the XML ToolsFile file.

Related Resources

  • DefaultCS.aspx
  • styles.css
  • Tools.xml
<%@ Page Language="C#" Debug="true" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolsFile="Tools.xml" Width="800px">
            <Content>
            <h1 class="customH1">Title: Lorem Ipsum</h1>
            <br />
            <h2>Section 1 (H2 with a global class): Neque porro quisquam</h2>
            <p> Duis turpis augue, varius vitae, lacinia vitae, luctus et, arcu. Ut tempor adipiscing urna. Integer commodo, neque vel ultrices sodales, sapien lacus lobortis neque, et pharetra sem sapien in erat. Etiam in erat ut neque facilisis consectetur. Sed imperdiet nibh. Maecenas hendrerit. Duis pretium sodales ligula. Morbi elit libero, tincidunt non, iaculis vel, iaculis at, nibh. Vivamus vel urna et nisi hendrerit cursus. </p>
            <br />
            <h3>Sub-section 1 (H3 with a global class): Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>Nulla odio. Maecenas eu diam dapibus leo fermentum imperdiet. Suspendisse pellentesque lorem at nisl. Cras lectus. Pellentesque non augue. Nulla convallis gravida risus. Sed erat odio, facilisis ut, vestibulum vitae, hendrerit in, dolor. Nunc risus justo, pretium at, blandit et, ornare vel, nisl. Proin magna erat, cursus eu, aliquam.</p>
            <p>&nbsp;</p>
            <h4>Sub-section 2 (H4 with a global class): Aenean ac nisi vel nisl vulputate consequat.</h4>
            <p>Vivamus et lacus sit amet augue placerat dignissim. Donec metus. Fusce placerat tellus a elit. Cras quis arcu. Vestibulum vel nulla id est pulvinar ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum neque odio, congue ut, tincidunt vitae, consequat ut, ante. Phasellus aliquet ornare urna. Integer sed mi at neque semper blandit. Etiam mollis. </p>
            </Content>
            <CssFiles>
                <telerik:EditorCssFile Value="Styles.css" />
            </CssFiles>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?