Format Sets

in this demo you can use the Format sets tool in order to apply formatting to the content of the editor. There are three groups of sets in the dropdown. Element Format Sets modify the selected DOM element or the first container, which has the same tag name as the one set in the tag property of the format set. Inline Format Sets behave as the Apply Css Class tool. And Block Format Sets apply formatting similar to the Paragraph Styles tool.

The Format Sets tool is used in order to apply formatting to elements or sections in the content of the editor. There are three groups of sets in the dropdown.

• Element Format Sets modify the selected DOM element or the first container, which has the same tag name as the one, set in the tag property of the format set.
• Inline Format Sets behave as the Apply Css Class tool, which applies formatting to the parent block element or creates formatted font elements.
• Block Format Sets apply formatting similar to the Paragraph Styles tool by creating new formatted block elements or replacing the currently selected ones.

The set is defined by the FormatSets collection which contains EditorFormatSet elements. An editor format set contains three properties.

• Tag - It sets the tag name of the formatted DOM elements.
• Title - This is the HTML code, which is displayed as an option in the dropdown.
• Attributes - This is an EditorFormatSetAttributeCollection Name (attribute name), Value (attribute value) collection, which contains the attributes to be set in the formatted element.

Here are some sample settings of the FormatSets collection:

• Using the FormatSets Collection Declaratively

      <telerik:EditorFormatSet Tag="H1" Title="<h1 style='color: green'>green header 1</h1>">
          <Attributes>
              <telerik:EditorFormatSetAttribute Name="class" Value="greenClass" />
              <telerik:EditorFormatSetAttribute Name="style" Value="color: green;" />
          </Attributes>
      </telerik:EditorFormatSet>
      <telerik:EditorFormatSet Tag="img" Title="<span style='border: 1px solid red;'>red border image</span>">
          <Attributes>
              <telerik:EditorFormatSetAttribute Name="class" Value="redBorderImage" />
              <telerik:EditorFormatSetAttribute Name="style" Value="border: 1px solid red; margin: 10px;" />
          </Attributes>
      </telerik:EditorFormatSet>
      <telerik:EditorFormatSet Tag="li" Title="<ul><li style='list-style-type: square;color: Red;'>square red list</li></ul>">
          <Attributes>
              <telerik:EditorFormatSetAttribute Name="style" Value="list-style-type: square;color: red;" />
          </Attributes>
      </telerik:EditorFormatSet>
      <telerik:EditorFormatSet Tag="" Title="<span style='color: Magenta'>magenta text</span>">
          <Attributes>
              <telerik:EditorFormatSetAttribute Name="style" Value="color: Magenta" />
          </Attributes>
      </telerik:EditorFormatSet>

• Using FormatSets Collection Programmatically

  C#

  EditorFormatSet formatSet  = new  EditorFormatSet( "img" ,  "Red Border Image" ) ;
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "class" ,  "RedBorderImage" )) ;
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "alr" ,  "default alt value for Red Border Image" )) ;
  RadEditor1.FormatSets.Add(formatSet) ;
  
  formatSet  = new  EditorFormatSet( "h1" ,  "Green header" ) ;
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "style" ,  "color: Green;" )) ;
  RadEditor1.FormatSets.Add(formatSet) ;
  
  formatSet  = new  EditorFormatSet( "" ,  "magenta inline set" ) ;
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "style" ,  "color: Magenta;" )) ;
  RadEditor1.FormatSets.Add(formatSet) ;

  VB.NET

  EditorFormatSet formatSet  = new  EditorFormatSet( "img" ,  "Red Border Image" )
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "class" ,  "RedBorderImage" ))
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "alr" ,  "default alt value for Red Border Image" ))
  RadEditor1.FormatSets.Add(formatSet)
  
  formatSet  = new  EditorFormatSet( "h1" ,  "Green header" )
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "style" ,  "color: Green;" ))
  RadEditor1.FormatSets.Add(formatSet)
  
  formatSet  = new  EditorFormatSet( "" ,  "magenta inline set" )
  formatSet.Attributes.Add( new  EditorFormatSetAttribute( "style" ,  "color: Magenta;" ))
  RadEditor1.FormatSets.Add(formatSet)
• Using the ToolsFile

  < ?xml  version ="1.0"  encoding ="utf-8"  ? >
  < root >
       < tools  name ="MainToolbar">
           < tool  name ="FormatSets"   />
      </ tools >
       < formatSets >
           < formatSet  tag ="img"  title ="Default alt attribute">
               < attributes >
                   < item  name ="alt"  value ="Default alt attribute value"> </ item >
               </ attributes >
           </ formatSet >
           < formatSet  tag ="a"  title ="<a href='#' class='greenOrangeLink' style='text-decoration: line-through;'>Green orange link</a>">
               < attributes >
                   < item  name ="class"  value ="greenOrangeLink"> </ item >
                   < item  name ="style"  value ="text-decoration: line-through;"> </ item >
                   < item  name ="title"  value ="green, orange link"> </ item >
               </ attributes >
           </ formatSet >
       </ formatSets >
  </ root >

Related Resources

• Format Sets