Custom List Styles in C1Editor

The C1Editor control is a rich text editor that can be bound to an XHTML document. C1Editor uses XHTML as its basic format (instead of RTF or proprietary formats) which is why it is very easy to customize. The Editor control supports bulleted and numbered lists and also customize its functionality to an even greater extent using our own code. In this blog, we will be discussing how to create nested alphabetical list styles in the Editor. Before proceeding further, let's take a look how our final output will look :

Implementation

The implementation includes capturing the KeyDown event of the control and creating the nodes as the keys are pressed by the user. Here is the code snippet for the same:

 private void c1Editor1_KeyDown(object sender, KeyEventArgs e)  
 {  
   if (c1Editor1.Mode == EditorMode.Design && e.KeyCode == Keys.Tab) //tab is pressed in Design mode  
   {  
     C1TextRange range = c1Editor1.Selection; //get selection  
     if (range.Text.Length > 0 && range.IsTagApplied("ol")) //selected text inside list, need to increase or decrease level  
     {  
       e.Handled = true; //suppress standard key handling  
       c1Editor1.Selection.List.Execute(e.Shift ? List.Action.DecreaseLevel : List.Action.IncreaseLevel); //increase or decrease list level  
       range = c1Editor1.Selection; //get selection again  
       if (range.IsTagApplied("ol")) //sublist is created  
       {  
         range.Normalize();  
         List nodes = range.GetTags(C1StyleType.List, false); //get selected nodes  
         foreach (System.Xml.XmlNode node in nodes)  
         {  
           if (node.Name == "li") //LI tag found  
           {  
             XmlNode listNode = node.ParentNode; //get its parent  
             if (listNode.Name == "ol") //it must be OL tag  
             {  
               XmlNode currentNode = listNode;  
               int level = 1;  
               //move through node parents to get current list level  
               while (currentNode.ParentNode != null)  
               {  
                  currentNode = currentNode.ParentNode;  
                  if (currentNode.Name == "ol" || currentNode.Name == "ul")  
                  level++;  
               }  
               (listNode as System.Xml.XmlElement).SetAttribute("class", "list" + level); //set list style accordingly to its level  
              }  
            }  
          }  
        }  
      }  
    }  
  }  

Conclusion

Similarly, we can create other list styles using our own custom code. Download Sample-C# Download Sample-VB