CSS Class Dropdown Customization
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:
if (!IsPostBack) { CuteEditor.ToolControl toolctrl=Editor1.ToolControls["CssClass"]; if(toolctrl!=null) { CuteEditor.RichDropDownList dropdown=(CuteEditor.RichDropDownList)toolctrl.Control; //the first item is the caption CuteEditor.RichListItem richitem=dropdown.Items[0]; //clear the items from configuration files dropdown.Items.Clear(); //add the caption dropdown.Items.Add(richitem); //add value only dropdown.Items.Add("RedColor"); //add text and value dropdown.Items.Add("Highlight","Highlight"); //add html and text and value dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>","Bold Green Text","BoldGreen"); } }
VB Example:
If Not Page.IsPostBack Then If Not Editor1.ToolControls("CssClass") Is Nothing Then Dim dropdown As CuteEditor.RichDropDownList Dim richitem As CuteEditor.RichListItem dropdown = DirectCast(Editor1.ToolControls("CssClass").Control, CuteEditor.RichDropDownList) 'the first item is the caption richitem = dropdown.Items(0) 'clear the items from configuration files dropdown.Items.Clear() 'add the caption dropdown.Items.Add(richitem) 'add value only dropdown.Items.Add("RedColor") 'add text and value dropdown.Items.Add("Highlight","Highlight") 'Add html and text and value dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>", "Bold Green Text", "BoldGreen") End If 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:
<CssClass>
<item
text="[[NotSet]]"
value="null"></item>
<item
text="Red Text"
value="RedColor">
<html><![CDATA[ <span
class='RedColor'>RedColor</span>
]]>
</html>
</item>
<item
text="Highlight"
value="Highlight">
<html><![CDATA[
<span class='Highlight'>Highlight</span>
]]> </html>
</item>
<item
text="Bold Green Text"
value="BoldGreen">
<html><![CDATA[
<span class='BoldGreen'>Bold Green
Text</span>
]]> </html>
</item> </CssClass> Now the CSS Class dropdown
contains "RedColor", "Highlight" and "BoldGreen".
Please note that you can use the Editor.TemplateStyleSheet 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:
if (!IsPostBack) { CuteEditor.ToolControl toolctrl=Editor1.ToolControls["CssClass"]; if(toolctrl!=null) { CuteEditor.RichDropDownList dropdown=(CuteEditor.RichDropDownList)toolctrl.Control; //the first item is the caption CuteEditor.RichListItem richitem=dropdown.Items[0]; //clear the items from configuration files dropdown.Items.Clear(); //add the caption dropdown.Items.Add(richitem); //add value only dropdown.Items.Add("RedColor"); //add text and value dropdown.Items.Add("Highlight","Highlight"); //add html and text and value dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>","Bold Green Text","BoldGreen"); } }
VB Example:
If Not Page.IsPostBack Then If Not Editor1.ToolControls("CssClass") Is Nothing Then Dim dropdown As CuteEditor.RichDropDownList Dim richitem As CuteEditor.RichListItem dropdown = DirectCast(Editor1.ToolControls("CssClass").Control, CuteEditor.RichDropDownList) 'the first item is the caption richitem = dropdown.Items(0) 'clear the items from configuration files dropdown.Items.Clear() 'add the caption dropdown.Items.Add(richitem) 'add value only dropdown.Items.Add("RedColor") 'add text and value dropdown.Items.Add("Highlight","Highlight") 'Add html and text and value dropdown.Items.Add("<span class='BoldGreen'>Bold Green Text</span>", "Bold Green Text", "BoldGreen") End If End If
|
|