<?xml version="1.0" encoding="UTF-8"?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>rich:editor</keyword>
                              <keyword>editor</keyword>
                    </keywordset>
          </sectioninfo>
          <table>
                    <title>Component identification parameters</title>
                    <tgroup cols="2">
                              <thead>
                                        <row>
                                                  <entry>Name</entry>
                                                  <entry>Value</entry>
                                        </row>
                              </thead>
                              <tbody>
                                        <row>
                                                  <entry>component-type</entry>
                                                  <entry>org.richfaces.component.editor</entry>
                                        </row>
                                        <row>
                                                  <entry>component-class</entry>
                                                  <entry>org.richfaces.component.html.Htmleditor</entry>
                                        </row>
                                        <row>
                                                  <entry>component-family</entry>
                                                  <entry>org.richfaces.component.editor</entry>
                                        </row>
                                        <row>
                                                  <entry>renderer-type</entry>
                                                  <entry>org.richfaces.renderkit.html.editorRenderer</entry>
                                        </row>
                                        <row>
                                                  <entry>tag-class</entry>
                                                  <entry>org.richfaces.taglib.editorTag</entry>
                                        </row>
                              </tbody>
                    </tgroup>
          </table>
          <section>
                    <title>Creating the Component with a Page Tag</title>
                    <para>To create the simplest variant on a page use the following syntax:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<rich:editor />
...]]></programlisting>
          </section>
          
          
          <section>
                    
                    <title>Creating the Component Dynamically Using Java</title>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.Htmleditor;
...
Htmleditor myeditor = new Htmleditor();
...]]></programlisting>
          </section>
          <section>
                    <title>Details of Usage</title>
			<para>The <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> is fully based on TinyMCE web based Javascript HTML WYSIWYG editor control and supports all of the features it has.
          The <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> adapts the TinyMCE editor for JSF environment and adds some functional capabilities.
			</para>
			<para>
				The easiest way to place the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> on a page is as follows:
			</para>
            <para>
				<emphasis role="bold">Example:</emphasis>
            </para>          
<programlisting role="XML"><![CDATA[<rich:editor value="#{bean.editorValue}" />]]></programlisting>  
    <para>
		Implementation of  <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> provides three ways to define the properties of the component:
    </para>
 
 <orderedlist>
           <listitem><para>Using attributes</para></listitem>
           <listitem><para>Using using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> JSF tag</para></listitem>
           <listitem><para>Using configuration files that allow you to set up multiple configurations for all editors in your application and change them in the runtime</para></listitem>
 </orderedlist>
      
    <para>The three methods are described in details in the chapter.</para>  
    <para>
		The most important properties are implemented as attributes and you can define them as any other attribute.
        The attributes of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> component match the corresponding properties of TinyMCE editor.			
	</para>   
    <para>
		For example, a theme for the editor can be defined using the <emphasis><property>&quot;theme&quot;</property></emphasis> attribute like this: 
	</para>
    <para>
        <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[
<rich:editor value="#{bean.editorValue}" theme="advanced" />
]]></programlisting>  
                    <para>Setting a different skin for the editor can be done using the <emphasis><property>&quot;skin&quot;</property></emphasis> attribute.</para>
                    <para>
						Another useful property that is implemented at attribute level is <emphasis><property>&quot;viewMode&quot;</property></emphasis>. 
						The attribute switches between &quot;visual&quot; and &quot;source&quot; modes, toggling between modes is performed setting the attribute to &quot;visual&quot; and &quot;source&quot; respectively. 
                              Implementation of <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> also implies that you can change the modes dynamically setting the value of the <emphasis><property>&quot;viewMode&quot;</property></emphasis> attribute using EL-expression. 
                    </para>
                    
                              <para>
                                        <emphasis role="bold">Example:</emphasis>
                              </para>
                    <programlisting role="XML"><![CDATA[...  
<rich:editor value="#{editor.submit}" theme="advanced" viewMode="#{editor.viewMode}" >
	...
	<h:selectOneRadio value="#{editor.viewMode}" onchange="submit();">
		<f:selectItem itemValue="visual" itemLabel="visual" />
		<f:selectItem itemValue="source" itemLabel="source" />
    </h:selectOneRadio>
    ...
</rich:editor>
...]]></programlisting>  
    <para>
		Most configuration options that TinyMCE provides can be applied using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> JSF tag. 
        The syntax is quite simple: the <emphasis><property>&quot;name&quot;</property></emphasis> attribute should contain the option, 
		the <emphasis><property>&quot;value&quot;</property></emphasis> attribute assigns some value to the option.
	</para>
	<para>
		For example, this code adds some buttons to the editor and positions the toolbar.  
	</para>
    <para>
        <emphasis role="bold">Example:</emphasis>
    </para>
<programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" theme="advanced" plugins="save,paste" >
          <f:param name="theme_advanced_buttons1" value="bold,italic,underline, cut,copy,paste,pasteword"/>
          <f:param name="theme_advanced_toolbar_location" value="top"/>                               
          <f:param name="theme_advanced_toolbar_align" value="left"/>
</rich:editor>
...]]></programlisting> 
                    <para>This is what you get as a result:</para>
				<figure>
                              <title> Setting configuration options with &lt;f:param&gt;
             
                              </title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/editor2.png"/>
                                        </imageobject>
                              </mediaobject>
       </figure>
                    
                
                    <para>The third way to configure the <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> is 
                    to use configuration file (.properties)</para>
                    
                    <para>
						This method eases your life if you need to configure multiple instances 
						of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis>: you configure the editor once 
						and in one spot and the configuration properties can be applied to any 
						<emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> in your application.
					</para>
                    <para>To implement this type of configuration you need to take a few steps:</para>
                    <itemizedlist>
                            <listitem>
								<para>
									Create a configuration file (.properties) in the classpath folder and add some properties to it. 
									Use standard syntax for the .properties files: <code>parameter=value</code>.  
									Here is an example of configuration file:
								</para>
                                <para>
									<emphasis role="bold">Example:</emphasis>
                                </para>      
                                <programlisting role="XML"><![CDATA[theme="advanced"
plugins="save,paste"
theme_advanced_buttons1="bold,italic,underline, cut,copy,paste,pasteword"
theme_advanced_toolbar_location="top"
theme_advanced_toolbar_align="left"
]]></programlisting> 
                                                       
                            </listitem>
                            <listitem>
								<para>
									The properties stored in configuration file are passed to the
                                    <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> via 
                                    <emphasis><property>&quot;configuration&quot;</property></emphasis> attribute which takes the name of the configuration file 
									as a value (with out .properties extension).
								</para>
								<para>
									For example, if you named the configuration file &quot;editorconfig&quot;, you would address it as follows:
								</para>
                                <para>
									<emphasis role="bold">Example:</emphasis>
                                </para>
                              <programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" configuration="editorconfig"/>
...]]></programlisting> 
                              
                    </listitem>    
                    <listitem>
						<para>
                             Alternately, you can use a  EL-expression to define a configuration file. 
							  This way you can dynamically change the sets of configuration properties. 
						</para>
                 
						<para>
							For example, you have two configuration files &quot;configurationAdvanced&quot; and  &quot;configurationSimple&quot; and you want them to be 
             applied under some condition. 
						</para>
                        <para>
							To do this you need to bind  <emphasis><property>&quot;configuration&quot;</property></emphasis> 
							attribute to  the appropriate bean property  like this.
						</para>
            
                              <para>
                                        <emphasis role="bold">Example:</emphasis>
                              </para>
<programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" configuration="#{editor.configuration}" />
...]]></programlisting> 
                              <para>Your Java file should look like this.</para>
                              
                              <programlisting role="JAVA"><![CDATA[...
	String configuration;
	if(some condition){//defines some condition
                              configuration = "configurationAdvanced"; //the name on the file with advanced properties	
	}
	else{
	     configuration= "configurationSimple"; //the name on the file with simplified properties	
		
	}
...]]></programlisting>            
                              
                    
                    </listitem>
                    
                    </itemizedlist>
                    
  
                    <para>
                              You also might want to add some custom plug-ins to your editor. 
                              You can read about how to create a  plugin in <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Creating_Plugin">TinyMCE Wiki article</ulink>.
                    </para>
                    
                    <para>
                              Adding a custom plugin also requires a few steps to take. Though, the procedure is very similar to adding a configuration file.
                              
                    </para>
                    
                    <para>This is what you need to add a plugin:</para>
                    <itemizedlist>
                              <listitem>
								<para>Create a .properties file and put the name of the plug-in and a path to it into the file.
                                        The file can contain multiple plug-in declarations. Your .properties file should be like this. 
								</para>
                                <para>
                                    <emphasis role="bold">Example:</emphasis>
                                </para>
                                <programlisting role="XML"><![CDATA[...
pluginName=/mytinymceplugins/plugin1Name/editor_plugin.js
...]]></programlisting>      
                              
                              </listitem>
                              <listitem>
                                        <para>
											Use the <emphasis><property>&quot;customPlugins&quot;</property></emphasis> attribute to specify the .properties file with a plugin name and a path to it.
										</para>
                                        <para>
											If your .properties file is named "myPlugins", then your will have this code on the page.
										</para>
                                        <para>
                                                  <emphasis role="bold">Example:</emphasis>
                                        </para>
                                        <programlisting role="XML"><![CDATA[...
<rich:editor theme="advanced" customPlugins="myPlugins" plugins="pluginName" /> 
...]]></programlisting>   
                                        
                              </listitem>
                    </itemizedlist>
                              <note>
								<title>Note:</title>
									<para>
Some plug-ins which available for download might have some dependencies on TinyMCE scripts.
For example, dialog pop-ups require tiny_mce_popup.js script file. 
Assuming that you will not plug  custom plugins to the RF jar with editor component
(standard TinyMCE plugins creation implies that plugins are put into TinyMCE&apos;s corresponding directory)
 you should manually add required TinyMCE scripts to some project folder and correct the js includes.
                                        </para>
                              </note>                   
                    <para>
                              The implementation of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> component has two  methods for handling
                    events. 
                    </para>  
                    <para>The attributes take some function name as a value with is triggered on the appropriate event.  You need to use standard JavaScript function calling syntax. </para>
                    
                    <itemizedlist>                    
                    <listitem>
                              <para>Using  attributes (<emphasis><property>&quot;onchange&quot;</property></emphasis>, 
								  <emphasis><property>&quot;oninit&quot;</property></emphasis>,
								  <emphasis><property>&quot;onsave&quot;</property></emphasis>,
								  <emphasis><property>&quot;onsetup&quot;</property></emphasis>)
							  </para>
                              <para>
                                        <emphasis role="bold">Example:</emphasis>
                              </para>                              
               <programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" onchange="myCustomOnChangeHandler()" />
...]]></programlisting> 
                    </listitem>
                    <listitem>
                        <para>
							Using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> as a child element defining the <emphasis><property>&quot;name&quot;</property></emphasis> attribute 
							with one of the TinyMCE&apos;s callbacks and the 
							<emphasis><property>&quot;value&quot;</property></emphasis> attribute takes the function name you want to be called 
							on the corresponding event as the value. Note, that the syntax in this case is a bit different: parentheses are not required. 
						</para>
	                    <para>
	                        <emphasis role="bold">Example:</emphasis>
	                    </para>
	                    <programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}">
		<f:param name="onchange" value="myCustomOnChangeHandler" />
</rich:editor>
...]]></programlisting> 
					</listitem>
	</itemizedlist>
                    
                    <para>The <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> 
                              component has a build-in converter that renders HTML code generated by the editor 
                              to Seam text (you can read more on Seam  in <ulink url="http://docs.jboss.org/seam/1.1.5.GA/reference/en/html/text.html">Seam guide</ulink>.), it also interprets Seam text
                              passed to the <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> and renders it to HTML. 
                              The converter can be enable with the <emphasis><property>&quot;useSeamText&quot;</property></emphasis> attribute.</para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    
                    <para>This HTML code generated by editor</para>
                    <programlisting role="XML"><![CDATA[...
<p><a href="http://mysite.com">Lorem ipsum</a> <i>dolor sit</i> amet, ea <u>commodo</u> consequat.</p>
...]]></programlisting>   
                   <para>will be parsed to the following Seam text:</para>
                    
                    <programlisting role="XML"><![CDATA[...
[Lorem ipsum=>http://mysite.com] *dolor sit* amet, ea _commodo_ consequat.
...]]></programlisting>
                    <para>Accordingly, if the Seam text is passed to the component it will be parsed to HTML code.</para>

          </section>
          <section>
                    <title>Look-and-Feel Customization</title>
                    <para>For skinnability implementation, the components use a <emphasis>
                                        <property>style class redefinition method.</property>
                              </emphasis> Default style classes are mapped on <emphasis>
                                        <property>skin parameters.</property>
                              </emphasis></para>
                    <para>There are two ways to redefine the appearance of all <emphasis role="bold">
                                        <property>&lt;rich:editor&gt;</property>
                              </emphasis> components at once: <itemizedlist>
                                        <listitem>
                                                  <para>Redefine the corresponding skin
                                                  parameters</para>
                                        </listitem>
                                        <listitem>
                                                  <para> Add to your style sheets style classes used
                                                  by a <emphasis role="bold">
                                                  <property>&lt;rich:editor&gt;</property>
                                                  </emphasis> component</para>
                                        </listitem>
                              </itemizedlist>
                    </para>
          </section>
          
          <section>
                    <title>Skin Parameters Redefinition</title>
                    
                    <table>
                              <title>Skin parameters redefinition for containers</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>
                                                  <row>
                                                            <entry>additionalBackgroundColor</entry>
                                                            
                                                            <entry>background</entry>
                                                  </row>
                                                  
                                        </tbody>
                              </tgroup>
                    </table>



                    <table>
                              <title>Skin parameters redefinition for external controls</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-color</entry>
                                                  </row>
                                                  
                                        </tbody>
                              </tgroup>
                    </table>


                    <table>
                              <title>Skin parameters redefinition for layout</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-left-color</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-right-color</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-top-color</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-bottom-color</entry>
                                                  </row>
                                                  
                                                  <row>
                                                                                                                     
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  <row>
                                                            <entry>generalTextColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>headerBackgroundColor</entry>
                                                            
                                                            <entry>background-color</entry>
                                                  </row>
                                                  
                                        </tbody>
                              </tgroup>
                    </table>                
                        <table>
                                                            <title>Skin parameters redefinition for buttons</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                  
                                                  
                                                  <row>
                                                            <entry>headerBackgroundColor</entry>
                                                            
                                                            <entry>background-color</entry>
                                                  </row>
                                                  
                                        </tbody>
                              </tgroup>
                    </table>





                                                  <table>
                                                            <title>Skin parameters redefinition for list box</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
																						  
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>tableBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>panelBorderColor</entry>
                                                                                          
                                                                                          <entry>border-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>generalFamilyFont</entry>
                                                                                          
                                                                                          <entry>font-family</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                       
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                                                  
                                                  
                                                  
                                                  <table>
                                                            <title>Skin parameters redefinition for color split button</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>tableBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>panelBorderColor</entry>
                                                                                          
                                                                                          <entry>border-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>generalFamilyFont</entry>
                                                                                          
                                                                                          <entry>font-family</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>additionalBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background-color</entry>
                                                                                </row>
                                                            
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                                                  
                                                  
                                                  <table>
                                                            <title>Skin parameters redefinition for  hovered color split button</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                  <row>
                                                                                          <entry>headerBackgroundColor</entry>
                                                                                          
                                                                                          <entry>border-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                                                  
                                                  
                                                  
                                                  <table>
                                                            <title>Skin parameters redefinition for menu</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                <row>
                                                                                          <entry>panelBorderColor</entry>
                                                                                          
                                                                                          <entry>border-color</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>tableBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>generalFamilyFont</entry>
                                                                                          
                                                                                          <entry>font-family</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>generalTextColor</entry>
                                                                                          
                                                                                          <entry>color</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>additionalBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>additionalBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background-color</entry>
                                                                                </row>
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                                                  
                                                  <table>
                                                            <title>Skin parameters redefinition for menu item</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                <row>
                                                                                          <entry>additionalBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>panelBorderColor</entry>
                                                                                          
                                                                                          <entry>border-bottom-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                                <row>
                                                                                          <entry>generalTextColor</entry>
                                                                                          
                                                                                          <entry>color</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>generalTextColor</entry>
                                                                                          
                                                                                          <entry>color</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>tabDisabledTextColor</entry>
                                                                                          
                                                                                          <entry>color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                         
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                                                  
                                                  
                                                  
                                                  <table>
                                                            <title>Skin parameters redefinition for progress and resize states</title>
                                                            
                                                            <tgroup cols="2">
                                                                      <thead>
                                                                                <row>
                                                                                          <entry>Skin parameters</entry>
                                                                                          
                                                                                          <entry>CSS properties</entry>
                                                                                </row>
                                                                      </thead>
                                                                      
                                                                      <tbody>                     
                                                                                
                                                                                <row>
                                                                                          <entry>tableBackgroundColor</entry>
                                                                                          
                                                                                          <entry>background</entry>
                                                                                </row>
                                                                                
                                                                                <row>
                                                                                          <entry>tableBorderColor</entry>
                                                                                          
                                                                                          <entry>border-color</entry>
                                                                                </row>
                                                                                
                                                                                
                                                                            
                                                                                
                                                                                
                                                                                
                                                                      </tbody>
                                                            </tgroup>
                                                  </table>
                    
                    
                    
                    
                    
                    <table>
                              <title>Skin parameters redefinition for dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>generalBackgroundColor</entry>
                                                            
                                                            <entry>background</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    <table>
                              <title>Skin parameters redefinition for link in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalTextColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>hoverLinkColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    
                    
                    <table>
                              <title>Skin parameters redefinition for link in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalTextColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>hoverLinkColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                                
                                
                    <table>
                              <title>Skin parameters redefinition for fieldset  in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-color</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>




                    <table>
                              <title>Skin parameters redefinition for fieldset legend in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalLinkColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                             
                                                  
                                                  
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>




                    <table>
                              <title>Skin parameters redefinition for input elements in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>warningColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                                  <row>
                                                            <entry>warningColor</entry>
                                                            
                                                            <entry>border-color</entry>
                                                  </row>
                                                  
            
            
                                                  <row>
                                                            <entry>controlBackgroundColor</entry>
                                                            
                                                            <entry>background</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>tableBorderColor</entry>
                                                            
                                                            <entry>border-color</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                 
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    
                    
                    <table>
                              <title>Skin parameters redefinition for panel wrapper in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>panelBorderColor</entry>
                                                            
                                                            <entry>border-color</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>tableBackgroundColor</entry>
                                                            
                                                            <entry>background</entry>
                                                  </row>
                                                  
                                                  
                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    <table>
                              <title>Skin parameters redefinition for headers in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalLinkColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                              
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    <table>
                              <title>Skin parameters redefinition for links in tabs in dialog box</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>generalTextColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    
                    <table>
                              <title>Skin parameters redefinition for main text area</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Skin parameters</entry>
                                                            
                                                            <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>                     
                                                  
                                                  <row>
                                                            <entry>generalFamilyFont</entry>
                                                            
                                                            <entry>font-family</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>generalTextColor</entry>
                                                            
                                                            <entry>color</entry>
                                                  </row>
                                                  
                                                  <row>
                                                            <entry>tableBackgroundColor</entry>
                                                            
                                                            <entry>background</entry>
                                                  </row>
                                                  
                                                  
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
  
                    
                    
                    </section>
          <section id="EditorDefinitionofCustomStyleSelectors">
                    <title>Definition of Custom Style Selectors</title>
            
                              <para>On the screenshot there are CSS selectors  that define styles for component elements.</para>
                              
                              <figure>
                                        <title>Classes names</title>
                                        <mediaobject>
                                                  <imageobject>
                                                            <imagedata fileref="images/editor3.png"/>
                                                  </imageobject>
                                        </mediaobject>
                              </figure>
                    
                    <table>
                              <title>CSS selectors for the layout of the editor</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Selector</entry>
                                                            
                                                            <entry>Description</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>
                                                  <row>
                                                            <entry>.richfacesSkin table.mceToolbar</entry>
                                                            <entry>Defines styles for the rows of icons within toolbar</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceButton</entry>
                                                            <entry>Defines styles for the buttons</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceButtonDisabled .mceIcon </entry>
                                                            <entry>Defines styles for the icons</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceListBox</entry>
                                                            <entry>Defines styles for the list box</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceSeparator</entry>
                                                            <entry>Defines styles for the buttons separator</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceIframeContainer</entry>
                                                            <entry>Defines styles for the container</entry>
                                                  </row>
                                    
                                                  <row>
                                                            <entry>.richfacesSkin table.mceLayout</entry>
                                                            <entry>Defines styles for the table layout</entry>
                                                  </row>
                                                  <row>
                                                            <entry>.richfacesSkin .mceToolbar</entry>
                                                            <entry>Defines styles for the toolbar</entry>
                                                  </row>
                                           
                                                  
                                        </tbody>
                              </tgroup>
                    </table>
                    
                    
                    
                    <table>
                              <title>CSS selectors for the menus</title>
                              
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Selector</entry>
                                                            
                                                            <entry>Description</entry>
                                                  </row>
                                        </thead>
                                        
                                        <tbody>
                                                  <row>
                                                            <entry>.richfacesSkin .mceMenu</entry>
                                                            <entry>Defines styles for the menus</entry>
                                                  </row>
                                                
                                                  <row>
                                                            <entry>.richfacesSkin .mceMenu .mceMenuItemActive</entry>
                                                            <entry>Defines styles for the active menu items</entry>
                                                  </row>
                                                  
                                                  
                                                  <row>
                                                            <entry>.richfacesSkin .mceMenu .mceMenuItemActive</entry>
                                                            <entry>Defines styles for the active menu items</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>
                    <para>In order to redefine styles for all <emphasis role="bold">
                              <property>&lt;rich:editor&gt;</property>
                    </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
                              same names (possible classes could be found in the tables <link linkend="EditorDefinitionofCustomStyleSelectors">above</link>) and define necessary properties in them.
                    </para> 
                    
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.richfacesSkin .mceButton {									
    border: 1px solid red;				
}	
...]]></programlisting>  
                    
                    <para>This is the result:</para>
                    
                    <figure>
                              <title>Redefinition styles with predefined selectors</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/editor4.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                   
                    <para>It&apos;s also possible to change styles of a particular 
                              <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding 
                              <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes. An example is placed below:</para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.myClass{  
	margin-top: 20px;
}
...]]></programlisting>  
                    <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold"
                              ><property>&lt;rich:editor&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para>
                    
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[<rich:editor value="#{bean.text}" styleClass="myClass"/>
]]></programlisting>    
       
       

          </section>

          <section>
                    <title>Relevant Resources Links</title>
                    
                    <para>The <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> is based on TinyMCE editor and supports almost all its features and properties some of which are not described here since you can find more detailed documentation on them on the official <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Index">web site.</ulink></para>
                    
                    
                    <para><ulink
                                        url="http://livedemo.exadel.com/richfaces-demo/richfaces/editor.jsf?c=editor"
                                        >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis
                                        role="bold">
                                        <property>&lt;rich:editor&gt;</property>
                              </emphasis> usage and sources for the given example. </para>
          </section>

</section>
