CuteEditor for .NET

CSS Class Dropdown Customization

The CSS Class dropdown of CuteEditor displays a predefined set of CSS Classes. You can easily add your own CSS Classes using the following methods.

1. Programmatically populate the CSS Class dropdown:


C# Example:
  1. if (!IsPostBack) {    
  2.    CuteEditor.ToolControl toolctrl=Editor1.ToolControls["CssClass"];    
  3.    if(toolctrl!=null) {    
  4.       CuteEditor.RichDropDownList dropdown=(CuteEditor.RichDropDownList)toolctrl.Control;    
  5.       //the first item is the caption    
  6.       CuteEditor.RichListItem richitem=dropdown.Items[0];    
  7.       //clear the items from configuration files    
  8.       dropdown.Items.Clear();    
  9.       //add the caption    
  10.        dropdown.Items.Add(richitem);    
  11.       //add value only    
  12.       dropdown.Items.Add("RedColor");    
  13.       //add text and value    
  14.       dropdown.Items.Add("Highlight","Highlight");    
  15.       //add html and text and value    
  16.       dropdown.Items.Add("<span class='BoldGreen'>Bold      Green Text</span>","Bold      Green Text","BoldGreen");    
  17.    }    
  18. }  

VB Example:


  1. If Not Page.IsPostBack Then  
  2.   If Not Editor1.ToolControls("CssClass") Is Nothing Then  
  3.       Dim dropdown As CuteEditor.RichDropDownList   
  4.       Dim richitem As CuteEditor.RichListItem   
  5.       dropdown = DirectCast(Editor1.ToolControls("CssClass").Control, CuteEditor.RichDropDownList)   
  6.       'the first item is the caption   
  7.       richitem = dropdown.Items(0)   
  8.       'clear the items from configuration files   
  9.       dropdown.Items.Clear()   
  10.       'add the caption   
  11.       dropdown.Items.Add(richitem)   
  12.       'add value only   
  13.       dropdown.Items.Add("RedColor")   
  14.       'add text and value   
  15.       dropdown.Items.Add("Highlight","Highlight")   
  16.       'Add html and text and value   
  17.       dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>", "Bold Green Text", "BoldGreen")   
  18.   End If  
  19. End If  


2. Edit Dropdown Configuration file (Common.config):


The dropdown configuration file (Common.config) can be found in the /CuteEditor/Configuration/Shared folder. In dropdown configuration file you can find the CssClass element which contains the configuration information for the CSS Class dropdown within CuteEditor.  

You can modify the CssClass element to create your own CSS Classes list.

Example:

  1. <dropdowns>  
  2.     <CssClass>  
  3.         <item text="[[NotSet]]" value="null"></item>  
  4.         <item text="Red Text" value="RedColor">  
  5.             <html><![CDATA[<span style='color:red'>RedColor</span>]]></html>  
  6.         </item>  
  7.         <item text="textbold" value="textbold">  
  8.             <html><![CDATA[<span class='textbold'>textbold</span>]]></html>  
  9.         </item>  
  10.         <item text="Highlight" value="Highlight">  
  11.             <html><![CDATA[<span style='background-color: yellow'>Highlight</span>]]></html>  
  12.         </item>  
  13.         <item text="Bold Green Text" value="BoldGreen">  
  14.             <html><![CDATA[<span style='color: green; font-weight: bold;'>Bold Green Text</span>]]></html>  
  15.         </item>  
  16.     </CssClass>  
  17. </dropdowns>  

Now the CSS Class dropdown contains "RedColor", "textbold", "Highlight" and "BoldGreen".



Please note that you can use the Editor.EditorWysiwygModeCss Property to specify the location of the style sheet that will be used by the editable area.


For example:

<CE:Editor id="Editor1" runat="server" EditorWysiwygModeCss="~/example.css"></CE:Editor>

3: Programmatically populate the CSS Class dropdown:


C# Example:

  1. if (!IsPostBack) {    
  2.    CuteEditor.ToolControl toolctrl=Editor1.ToolControls["CssClass"];    
  3.    if(toolctrl!=null) {    
  4.       CuteEditor.RichDropDownList dropdown=(CuteEditor.RichDropDownList)toolctrl.Control;    
  5.       //the first item is the caption    
  6.       CuteEditor.RichListItem richitem=dropdown.Items[0];    
  7.       //clear the items from configuration files    
  8.            dropdown.Items.Clear();    
  9.       //add the caption    
  10.              dropdown.Items.Add(richitem);    
  11.       //add value only    
  12.       dropdown.Items.Add("RedColor");    
  13.       //add text and value    
  14.       dropdown.Items.Add("Highlight","Highlight");    
  15.       //add html and text and value    
  16.       dropdown.Items.Add("<span class='BoldGreen'>Bold      Green Text</span>","Bold      Green Text","BoldGreen");    
  17.      }    
  18. }  

VB Example:


  1. If Not Page.IsPostBack Then  
  2.   If Not Editor1.ToolControls("CssClass") Is Nothing Then  
  3.       Dim dropdown As CuteEditor.RichDropDownList   
  4.       Dim richitem As CuteEditor.RichListItem   
  5.       dropdown = DirectCast(Editor1.ToolControls("CssClass").Control, CuteEditor.RichDropDownList)   
  6.       'the first item is the caption   
  7.       richitem = dropdown.Items(0)   
  8.       'clear the items from configuration files   
  9.       dropdown.Items.Clear()   
  10.       'add the caption   
  11.       dropdown.Items.Add(richitem)   
  12.       'add value only   
  13.       dropdown.Items.Add("RedColor")   
  14.       'add text and value   
  15.       dropdown.Items.Add("Highlight","Highlight")   
  16.       'Add html and text and value   
  17.       dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>", "Bold Green Text", "BoldGreen")   
  18.   End If  
  19. End If  

 


© 2003 - 2012 CuteSoft.Net. All rights reserved.