Customize "style" in FCKeditor"

In FCKeditor, there is a column "style". By default, a set of default styles such as "Red title", "marker: yellow" are provided. However, this style does not meet our needs. At this time, we can modify the FCKeditor configuration file to customize the style. There are two ways to modify the FCKeditor ):

Method 1: Modify the fckconfig. JS File
Open the fckconfig. js file (under the FCKeditor directory) and find fckconfig. customstyles. the following definition is displayed: Fckconfig. customstyles =
{
' Red title ' : {Element: ' H3 ' , Styles :{ ' Color ' : ' Red ' }}
};

This is the default first "Red title" style definition. element: 'h3 'indicates that the style is centered around the

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><H3Style= "Color: red ;">Some words</H3>

If we need to add a style named "tnt2 style" and display it in bold, and the background-color in the style is yellow, what should we do? It is very simple: Fckconfig. customstyles =
{
' Red title ' : {Element: ' H3 ' , Styles :{ ' Color ' : ' Red ' }},
' Tnt2 Style ' : {Element: ' Strong ' , Styles :{ ' Background-color ' : ' Yellow ' }}
};

The generated HTML is equivalent: <StrongStyle= "Background-color: yellow">Some words</Strong>

The above only sets External Labels and defines styles. What if I have a ready-made class to reference? You only need to use the following Code : Code
Fckconfig. customstyles =
{
' Red title ' : {Element: ' H3 ' , Styles :{ ' Color ' : ' Red ' }},
' Tnt2 Style ' : {Element: ' Strong ' , Styles :{ ' Background-color ' : ' Yellow ' }, Attributes :{ ' Class ' : ' Tnt2 ' }}
};

The generated HTML is equivalent: <StrongClass= "Tnt2"Style= "Background-color: yellow">Some words</Strong>

From the code above, we can find that an attribute of attributes is defined, and any attribute in the tag, such as size and width, can be defined in attributes.

Method 2: Modify the fckstyles. xml file
Open fckstyles. XML file (and fckconfig. JS is located in the same directory), you can see that this is a configuration file with the root node <styles> and the child node is <style>.< Strong Class = "Tnt2" Style = "Background-color: yellow" > Some words </ Strong > You only need to add a style node: < Style Name = "Tnt2 style 2" Element = "Strong" >
< Style Name = "Background-color" Value = "Yellow"   />
< Attribute Name = "Class" Value = "Tnt2"   />
</ Style >

Where:
Element = "Strong" Equivalent to the element in Method 1:' Strong ';
< Style Name = "Background-color" Value = "Yellow"   /> Equivalent to styles in Method 1 :{ ' Background-color ' : ' Yellow ' };
<AttributeName= "Class"Value= "Tnt2" />Equivalent to attributes in Method 1 :{'Class':'Tnt2'}.
Note: fckconfig. the styles and attributes used in JS use negative numbers, while fckstyles. the node names used in XML are singular. If multiple parameters need to be set, insert multiple parallel labels.

although it is a small skill, it is very practical and can improve the customer experience and Editing efficiency.