[]
DEMO DOCS API SAMPLES DOWNLOAD
(Showing Draft Content)

Using a Cascading Style Sheet with C1Editor

  1. Create a .NET project and add a C1Editor and Button control to the form.

  2. In the Solution Explorer, double-click Resources.resx, click Add Resource, and select Add New String.

  3. Enter sEditorText as the Name of the resource.

  4. In the Value column, enter some content for the .xml document. You can copy this sample content and enter it if you prefer.

    Sample content

    <?xml version="1.0" encoding="utf-8"?>"C:\Users\jjj\AppData\Local\Temp\tmpB1BB.tmp"[]><html
    xmlns="http://www.w3.org/1999/xhtml"><head><title>Famous
    Pittsburgers</title><meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" /></head><body><h1>Famous
    Pittsburghers</h1><p class="BodyText">Many famous and successful
    people were born and raised in Pittsburgh; although they found
    fame in other cities, they called Pittsburgh home.</p><p
    class="C1SectionCollapsed">Actors/Comedians</p><ul><li><p
    class="C1HBullet">Gene Kelly (Dancer and star of "Singin' in the
    Rain")</p></li><li><p class="C1HBullet">Michael Keaton (Star of
    "Batman," "Mr. Mom," and many other movies)</p></li><li><p
    class="C1HBullet">Dennis Miller ("Saturday Night Live" cast
    member and TV/radio talk show host) </p></li></ul><p
    class="C1SectionCollapsed">TV Legend</p><ul><li><p
    class="C1HBullet">Fred Rogers (Producer and host of PBS's "Mister
    Rogers' Neighborhood")</p></li></ul><p
    class="C1SectionCollapsed">Artists</p><ul><li><p
    class="C1HBullet">Mary Cassatt (Impressionist
    painter)</p></li><li><p class="C1HBullet">Andy Warhol (Pop
    artist; Pittsburgh is the home of the Andy Warhol Museum)
    </p></li></ul><p class="C1SectionCollapsed">Sports
    Legends</p><ul><li><p class="C1HBullet">Dan Marino (Quarterback
    of the Miami Dolphins and University of Pittsburgh
    Panthers)</p></li><li><p class="C1HBullet">Joe Montana (Super
    Bowl champion quarterback of the San Francisco
    49ers)</p></li><li><p class="C1HBullet">Joe Namath (Outspoken New
    York Jets quarterback; victorious in Super Bowl
    III)</p></li><li><p class="C1HBullet">Johnny Unitas (Quarterback
    of the Baltimore Colts for 17 years)</p></li><li><p
    class="C1HBullet">Arnold Palmer (Golf legend and winner of more
    than 60 PGA events, including the Masters and the U.S.
    Open)</p></li></ul><p
    class="C1SectionCollapsed">Singers</p><ul><li><p
    class="C1HBullet">Perry Como (Recorded over 100 hit
    singles)</p></li><li><p class="C1HBullet">Bobby Vinton ("Roses
    are Red" and "Blue Velvet" hit #1 on the Billboard
    charts)</p></li></ul><p
    class="C1SectionCollapsed">Writers</p><ul><li><p
    class="C1HBullet">Rachel Carson (Author of "Silent Spring," as
    well as a pioneering
    environmentalist)</p></li></ul></body></html>








































  5. Go back to your form and double-click it.

  6. In the Form_Load event, enter code to load the .xml document so it looks like the following:

    To write code in C#

     
    private void Form1_Load(object sender, EventArgs e)
        {
            c1Editor1.LoadXml(Resources.sEditorText, null);
        }

Load a CSS

  1. Create a CSS and add it to your project by right-clicking the project name in the Solution Explorer, select Add Existing Item, choosing the CSS, and clicking Add. You can use this sample CSS if you don't already have one.

    Sample CSS

     
    html {

           font-family: Verdana;

           font-size: 10pt;

           line-height: normal;

           margin-bottom: 0pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 0pt;

    }

    

    h1 {

           font-family: Verdana;

           font-size: 20pt;

           font-weight: bold;

           line-height: normal;

           margin-bottom: 8pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 10pt;

    }

    

    h2 {

           font-family: Verdana;

           font-size: 16pt;

           font-weight: bold;

           line-height: normal;

           margin-bottom: 7pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 9pt;

           page-break-after: avoid;

    }

    

    h3 {

           font-family: Verdana;

           font-size: 16pt;

           font-weight: bold;

           line-height: normal;

           margin-bottom: 7pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 9pt;

           page-break-after: avoid;

    }

    

    h4 {

           font-family: Verdana;

           font-size: 12pt;

           font-weight: bold;

           line-height: normal;

           margin-bottom: 2pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 2pt;

           page-break-after: avoid;

    }

    

    .C1HBullet {

           font-family: Verdana;

           font-size: 10pt;

            font-style: italic;

           line-height: 14pt;

           margin-bottom: 0pt;

           margin-left: 18pt;

           margin-right: 0pt;

           margin-top: 5pt;

           text-indent: -18pt;

    }

    

    p {

           font-family: Verdana;

           font-size: 10pt;

           line-height: 14pt;

           margin-bottom: 0pt;

           margin-left: 0pt;

           margin-right: 0pt;

           margin-top: 5pt;

            text-indent: 18pt;

    }

    

    .C1SectionCollapsed {

           font-weight: bold;

    }

  2. Add a button1_Click event and use the LoadDesignCSS method:

    To write code in C#

     
    privatevoid button1_Click(object sender, EventArgs e)
       {
           c1Editor1.LoadDesignCSS(@"C:\CSS1.css");
       }

Run the Project

  1. Press F5 to run the project. Notice the document is loaded in the C1Editor.
  2. Click the button. The document is formatted with the CSS.

For a detailed example of using custom cascading style sheets, see the UserCSS sample that comes with this product.