<?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>
                    
                    
 <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 &lt;f:param&gt; JSF tag;</para></listitem>
           <listitem><para>Using configuration files.</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 <property>&quot;theme&quot;</property> attribute like this: </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 <property>&quot;skin&quot;</property> attribute.</para>
                    
                    <para>Another useful property that is implemented at attribute level is <property>&quot;viewmode&quot;</property>. 
                              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.</para>
                   
                    <para>
                              Apart from the attributes that define the editor&apos;s properties there are  some attributes that help  handle events(custom event handlers).
                    </para>
                    <para>
                              All custom event handlers  are listed in the table of attributes and you can use them the same way as standard HTML event handlers. 
                    </para>


                    <para>Most configuration options that TinyMCE provides can be applied using &lt;f:param&gt; JSF tag. 
                              The syntax is quite simple: the <property>&quot;name&quot;</property> attribute should contain the option, 
                              the <property>&quot;value&quot;</property> attribute assigns some value to the option.</para>

<para>For example, this code adds some buttons to the editor and positions the toolbar.  </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>
                                      <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 
                                      <property>&quot;configuration&quot;</property>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>
                              
                              <programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" configuration="editorconfig"/>
...]]></programlisting> 
                              
                            </listitem>    
                    <listitem><para>
                              Alternately, you can use a  EL-binding 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 <property>&quot;configuration&quot;</property>attribute to  the appropriate bean property  like this . </para>
            
<programlisting role="XML"><![CDATA[...
<rich:editor value="#{bean.editorValue}" configuration="#{editor.property}" />
...]]></programlisting> 
                              <para>Your Java file should look like this.</para>
                              
                              <programlisting role="JAVA"><![CDATA[...
	String configuration;
	if(some condition){//define 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  plug-in <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Creating_Plugin">here</ulink>.
                    </para>
                    
                    <para>
                              Adding a custom plug-in 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 plug-in:</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>
                                        <programlisting role="XML"><![CDATA[...
pluginName=/mytinymceplugins/plugin1Name/editor_plugin.js
...]]></programlisting>      
                              
                              </listitem>
                              <listitem>
                                        <para>Use the <property>&quot;customPlugins&quot;</property> attribute to specify the .properties file with a plug-in name and a path to it.</para>
                                        <para>Example:</para>
                                        <para>If your .properties file is named "myPlugins", then your will have this code on the page.</para>
                                        <programlisting role="XML"><![CDATA[...
<rich:editor theme="advanced" customPlugins="myPlugins" plugins="pluginName">
...]]></programlisting>   
                                        
                              </listitem>
                              
                              <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>
                              
                    </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 Seam text <ulink url="http://docs.jboss.org/seam/1.1.5.GA/reference/en/html/text.html">here</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 <property>&quot;seamTest&quot;</property> attribute.</para>
                    <para>Example:</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>JavaScript API</title>
                    
              



                    


          </section>
          <!-- End of JavaScript API-->
          <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>
                                                  



          <section>
                    <title>Definition of Custom Style Classes</title>

                   

       
       

          </section>

          <section>
                    <title>Relevant Resources Links</title>
                    <para><ulink
                                        url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=editor"
                                        >Here</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>