Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Paragraph Styles

The Paragraph Style (FormatBlock) tool applies standard or predefined text styles to the selected paragraph. Click anywhere in the paragraph you want to format or just select some text and choose the preferred style from the dropdown.
   
 
 
 
 
   

  • Paragraph Styles dropdown

    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      >
    • 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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.FormatBlock.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .customH1
            {
                font-family: Garamond, Helvetica, "Times New Roman" , "Nueva Roman" , Serif;
                font-weight: normal;
                padding: 0 4px;
                margin: 0;
                color: orange;
                font-weight: bold;
                text-align: center;
                text-decoration: underline;
            }
            h2
            {
                font-family: Garamond, Helvetica, "Times New Roman" , "Nueva Roman" , Serif;
                font-weight: normal;
                font-style: italic;
                color: #279500;
                padding: 0 4px;
                margin: 0;
                text-decoration: underline;
            }
            h3
            {
                font-family: Garamond, Helvetica, "Times New Roman" , "Nueva Roman" , Serif;
                font-weight: normal;
                font-style: italic;
                font-size: 17px;
                color: #316300;
                padding: 0 4px;
                margin: 0;
                text-decoration: underline;
            }
            h4
            {
                font-family: Garamond, Helvetica, "Times New Roman" , "Nueva Roman" , Serif;
                font-weight: normal;
                font-style: italic;
                font-size: 16px;
                color: #3F97FF;
                padding: 0 4px;
                margin: 0;
                text-decoration: underline;
            }
            p
            {
                font-family: "Trebuchet MS";
                font-size: 12px;
                color: #222;
                padding: 0 4px;
                line-height: 1.5em;
                margin: 0;
            }
            .contrast
            {
                background-color: orange;
                color: white;
                font-size: 20px;
                font-family: Garamond, Helvetica, "Times New Roman" , "Nueva Roman" , Serif;
                font-style: normal;
                padding: 0 4px;
                margin: 0;
                text-decoration: underline;
            }
            .serif
            {
                font-family: Sans-serif;
                font-size: 14pt;
                color: #999;
                margin: 0;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <qsf:InformationBox ID="InformationBox1" runat="server">
                The Paragraph Style (FormatBlock) tool applies standard or predefined text styles
                to the selected paragraph. Click anywhere in the paragraph you want to format or
                just select some text and choose the preferred style from the dropdown.
        </qsf:InformationBox>
        <telerik:RadEditor runat="server" ID="RadEditor1" ToolsFile="Tools.xml">
            <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>
        </telerik:RadEditor>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451