FCKeditor 2.x/Developers Guide/Configuration/Styles - Revision history

Fredck at 11:57, 16 January 2008

2008-01-16T11:57:50Z

W.olchawa at 11:54, 16 January 2008

2008-01-16T11:54:24Z

W.olchawa at 11:32, 16 January 2008

2008-01-16T11:32:39Z

W.olchawa at 11:21, 16 January 2008

2008-01-16T11:21:16Z

W.olchawa at 11:16, 16 January 2008

2008-01-16T11:16:49Z

W.olchawa at 11:16, 16 January 2008

2008-01-16T11:16:25Z

W.olchawa at 11:16, 16 January 2008

2008-01-16T11:16:03Z

W.olchawa at 11:15, 16 January 2008

2008-01-16T11:15:22Z

W.olchawa at 11:12, 16 January 2008

2008-01-16T11:12:49Z

W.olchawa: New page: == Styles Configuration == The editor offers complete and powerful support for separating text formatting definitions from the text itself. And even more, it's possible to offer a complet...

2008-01-16T11:03:55Z

New page: == Styles Configuration == The editor offers complete and powerful support for separating text formatting definitions from the text itself. And even more, it's possible to offer a complet...

New page

== Styles Configuration ==

The editor offers complete and powerful support for separating text formatting definitions from the text itself. And even more, it's possible to offer a complete set of predefined formatting definitions to the end-user (writer) so the text can be well designed without messing up the HTML source.

To do that, the "'''Style'''" toolbar command has been introduced. It shows a complete list of available styles with preview for text styles.

=== Customizing the Styles list ===

The list of available styles is completely customizable for your needs. It is based on an XML file. This file can be placed anywhere in your site. You just need to point the editor to the right path using the following configuration setting:
<pre>
FCKConfig.StylesXmlPath = '../fckstyles.xml' ;
</pre>

=== The Styles XML file ===

It is a simple file that describes how to name and apply each style available in the editor. This is a sample:
<pre>
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
</pre>
The above sample shows how to define four styles, one for an "Object" element (in this case for images) and three for text. The editor will show the styles in a context sensitive fashion, so when an image is selected, only the "'''My Image'''" style will be available in the list and when text is selected the "'''Italic'''", "'''Title'''" and "'''Title H3'''" will be shown.

The root node of the Styles XML file must be named "Styles". Each style definition must be a child of the root node with a "Style" name.

The "'''Style'''" nodes have two mandatory attributes:
* '''name''': defines the text shown in the styles list.
* '''element''': the element used to apply the style on text selection or the “object” element to which the style can be applied.

@@ Line 80: / Line 80: @@
 Example: if you have an image in the editor and apply the “My Image” style (from our sample) the source could be something like this:
 <pre>&lt;img src="Image.jpg" style="padding: 5px" border="2"&gt;
 </pre>

@@ Line 59: / Line 59: @@
 '''NOTE''':Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/EditorAreaCSS|EditorAreaCSS]] property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add:
 <pre>FCKConfig.EditorAreaCSS = '/myownstyles.css'&nbsp;;
 </pre>
 === "Object" elements ===
 The editor is context sensitive. If the user selects some text, only the text styles will be available in the styles list. In the other case, when an object is selected, the list will show only styles defined for that object (currently available only for Internet Explorer).
 The object elements supported by the editor are:
 * '''IMG'''
 * '''TABLE'''
 * '''TR'''
 * '''TD'''
 * '''INPUT'''
 * '''SELECT'''
 * '''TEXTAREA'''
@@ Line 79: / Line 79: @@
 Example: if you have an image in the editor and apply the “My Image” style (from our sample) the source could be something like this:
 <pre>
-<img src="Image.jpg" style="padding: 5px" border="2">
+@headers["Content-Type"] = "application/xml"
 </pre>

@@ Line 51: / Line 51: @@
 Using the same sample, but instead selecting the “Title” style, the source result should be:
 <pre>This is a &lt;span class="Title"&gt;Style Command&lt;/span&gt; test
 </pre>
 We can also combine many styles over the same selection. So with the above sample, without changing the selection, and applying the "Italic" style, the result should be:
 <pre>This is a &lt;span class="Title"&gt;&lt;em&gt;Style Command&lt;/em&gt;&lt;/span&gt; test
@@ Line 60: / Line 59: @@
 '''NOTE''':Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/EditorAreaCSS|EditorAreaCSS]] property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add:
 <pre>FCKConfig.EditorAreaCSS = '/myownstyles.css'&nbsp;;
 </pre>

@@ Line 53: / Line 53: @@
 </pre>
 We can also combine many styles over the same selection. So with the above sample, without changing the selection, and applying the "Italic" style, the result should be:
 <pre>This is a &lt;span class="Title"&gt;&lt;em&gt;Style Command&lt;/em&gt;&lt;/span&gt; test

@@ Line 51: / Line 51: @@
 Using the same sample, but instead selecting the “Title” style, the source result should be:
 <pre>This is a &lt;span class="Title"&gt;Style Command&lt;/span&gt; test
 </pre>
 === ===

@@ Line 14: / Line 14: @@
 It is a simple file that describes how to name and apply each style available in the editor. This is a sample:
 <pre>&lt;?xml version="1.0" encoding="utf-8"&nbsp;?&gt;
-&lt;Styles &gt;
+  &lt;Styles &gt;
-&lt;Style name="My Image" element="img"&gt;
+    &lt;Style name="My Image" element="img"&gt;
-&lt;Attribute name="style" value="padding: 5px" /&gt;
+      &lt;Attribute name="style" value="padding: 5px" /&gt;
-&lt;Attribute name="border" value="2" /&gt;
+      &lt;Attribute name="border" value="2" /&gt;
-&lt;/Style &gt;
+    &lt;/Style &gt;
-&lt;Style name="Italic" element="em" /&gt;
+  &lt;Style name="Italic" element="em" /&gt;
-&lt;Style name="Title" element="span"&gt;
+  &lt;Style name="Title" element="span"&gt;
-&lt;Attribute name="class" value="Title" /&gt;
+    &lt;Attribute name="class" value="Title" /&gt;
-&lt;/Style &gt;
+  &lt;/Style &gt;
-&lt;Style name="Title H3" element="h3" /&gt;
+  &lt;Style name="Title H3" element="h3" /&gt;
 &lt;/Styles&gt;
 </pre>
@@ Line 59: / Line 59: @@
 '''NOTE''':Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/EditorAreaCSS|EditorAreaCSS]] property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add:
 <pre>FCKConfig.EditorAreaCSS = '/myownstyles.css'&nbsp;;
 </pre>
 === "Object" elements ===

@@ Line 5: / Line 5: @@
 To do that, the "'''Style'''" toolbar command has been introduced. It shows a complete list of available styles with preview for text styles.
 === Customizing the Styles list ===
 The list of available styles is completely customizable for your needs. It is based on an XML file. This file can be placed anywhere in your site. You just need to point the editor to the right path using the following configuration setting:
-<pre>
+<pre>FCKConfig.StylesXmlPath = '../fckstyles.xml'&nbsp;;
-FCKConfig.StylesXmlPath = '../fckstyles.xml' ;
+</pre>
 === The Styles XML file ===
@@ Line 32: / Line 30: @@
 The root node of the Styles XML file must be named "Styles". Each style definition must be a child of the root node with a "Style" name.
-''' Style node '''
+==== Style node ====
 The "'''Style'''" nodes have two mandatory attributes:
@@ Line 40: / Line 38: @@
 For example: suppose we have the text "This is a Style Command test" inside the editor and we select “Style Command”. If we apply the "Italic" style the resulting source code will be something like this:
-<pre>
+<pre>This is a &lt;em&gt;Style Command&lt;/em&gt; test
-This is a <em>Style Command</em> test
+</pre>
 So the editor used the "em" tag to apply the style, as defined in the XML file.
-''' Attribute node '''
+==== Attribute node ====
 We can also combine elements and their attributes when applying a style. To do this we can add "'''Attribute'''" nodes inside the "'''Style'''" node definition. We can add as many attributes as we want. The "Attribute" node has two mandatory attributes:
 * '''name''': the attribute name.
 * '''value''': the value to be set to the attribute.
 Using the same sample, but instead selecting the “Title” style, the source result should be:
-<pre>
+<pre>This is a &lt;span class="Title"&gt;Style Command&lt;/span&gt; test
-This is a <span class="Title">Style Command</span> test
+</pre>
 We can also combine many styles over the same selection. So with the above sample, without changing the selection, and applying the "Italic" style, the result should be:
-<pre>
+<pre>This is a &lt;span class="Title"&gt;&lt;em&gt;Style Command&lt;/em&gt;&lt;/span&gt; test
-This is a <span class="Title"><em>Style Command</em></span> test
+</pre>
 The user can remove the applied style by selecting the style name again.
-'''NOTE''':Note: If you want to use your own css styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the [[FCKeditor 2.x/Developers Guide/Configuration/EditorAreaCSS|EditorAreaCSS ]] property in your config file. e.g. to use css styles defined inside "/myownstyles.css" you would need to add:
+'''NOTE''':Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/EditorAreaCSS|EditorAreaCSS]] property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add:
-<pre>
+<pre>FCKConfig.EditorAreaCSS = '/myownstyles.css'&nbsp;;
 </pre>

@@ Line 15: / Line 15: @@
 It is a simple file that describes how to name and apply each style available in the editor. This is a sample:
-<pre>
+<pre>&lt;?xml version="1.0" encoding="utf-8"&nbsp;?&gt;
-<?xml version="1.0" encoding="utf-8" ?>
+&lt;Styles &gt;
-<Styles >
+&lt;Style name="My Image" element="img"&gt;
-    <Style name="My Image" element="img">
+&lt;Attribute name="style" value="padding: 5px" /&gt;
-        <Attribute name="style" value="padding: 5px" />
+&lt;Attribute name="border" value="2" /&gt;
-        <Attribute name="border" value="2" />
+&lt;/Style &gt;
-    </Style >
+&lt;Style name="Italic" element="em" /&gt;
-    <Style name="Italic" element="em" />
+&lt;Style name="Title" element="span"&gt;
-    <Style name="Title" element="span">
+&lt;Attribute name="class" value="Title" /&gt;
-        <Attribute name="class" value="Title" />
+&lt;/Style &gt;
-    </Style >
+&lt;Style name="Title H3" element="h3" /&gt;
-    <Style name="Title H3" element="h3" />
+&lt;/Styles&gt;
-</Styles>
+</pre>
 The above sample shows how to define four styles, one for an "Object" element (in this case for images) and three for text. The editor will show the styles in a context sensitive fashion, so when an image is selected, only the "'''My Image'''" style will be available in the list and when text is selected the "'''Italic'''", "'''Title'''" and "'''Title H3'''" will be shown.
 The root node of the Styles XML file must be named "Styles". Each style definition must be a child of the root node with a "Style" name.
 The "'''Style'''" nodes have two mandatory attributes:
 * '''name''': defines the text shown in the styles list.
 * '''element''': the element used to apply the style on text selection or the “object” element to which the style can be applied.