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
|
|