From richfaces-svn-commits at lists.jboss.org Thu Sep 10 09:41:53 2009 Content-Type: multipart/mixed; boundary="===============8506705493121053117==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r15526 - branches/community/3.3.X/docs/userguide/en/src/main/docbook/included. Date: Thu, 10 Sep 2009 09:41:53 -0400 Message-ID: <200909101341.n8ADfrDa024678@svn01.web.mwc.hst.phx2.redhat.com> --===============8506705493121053117== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: atsebro Date: 2009-09-10 09:41:53 -0400 (Thu, 10 Sep 2009) New Revision: 15526 Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ric= h_editor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ric= h_modalPanel.xml Log: Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/inclu= ded/rich_editor.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_editor.xml 2009-09-10 13:39:11 UTC (rev 15525) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_editor.xml 2009-09-10 13:41:53 UTC (rev 15526) @@ -1,130 +1,110 @@
- - < - rich:editor - > - <emphasis role=3D"since"> - <superscript> available since <emphasis role=3D"version">3.3.0</e= mphasis> - </superscript> - </emphasis> - -
- Description - The - <rich:editor> - component is used for creating a WYSIWYG editor on a= page. = - -
- - <emphasis role=3D"bold"> - <property><rich:editor></property> - </emphasis> component - = - - - - -
- = -
-
- Key Features = = = = - - = - - Seam text support - - - Manageable global configurations - - - Possibility to use custom plug-ins - - - Support of all TinyMCE's parameters through - <f:param> - + < rich:editor > <emphasis role=3D"since"> + <superscript> available since <emphasis role=3D"version"= >3.3.0</emphasis> + </superscript> + </emphasis> + +
+ Description + The + <rich:editor> + component is used for creating a WYSIWYG edi= tor on a page. +
+ + <emphasis role=3D"bold"> + <property><rich:editor></property> + </emphasis> component + + + + + +
+ +
+
+ Key Features + + + + Seam text support + + + Manageable global configurations + + + Possibility to use custom plug-ins + + + Support of all TinyMCE's parameters through = + <f:param> + + + + + + +
+
+ Details of Usage + The + <rich:editor> + is fully based on TinyMCE web based Javascri= pt HTML WYSIWYG editor control and supports all of the features it has. The= + <rich:editor> + adapts the TinyMCE editor for JSF environmen= t and adds some functional capabilities. + The easiest way to place the + <rich:editor> + on a page is as follows: + + Example: - - = - + ]]> + Implementation of + <rich:editor> + provides three ways to define the properties= of the component: = -
-
- Details of Usage - The - <rich:editor> - is fully based on TinyMCE web based Javascript HTML W= YSIWYG editor control and supports all of the features it has. - The - <rich:editor> - adapts the TinyMCE editor for JSF environment and add= s some functional capabilities. - - - The easiest way to place the - <rich:editor> - on a page is as follows: - + + + Using attributes + + + Using using + <f:param> + JSF tag + + + Using configuration files that allow you to = set up multiple configurations for all editors in your application and chan= ge them in the runtime + + + + The three methods are described in details in the chapte= r. + The most important properties are implemented as attrib= utes and you can define them as any other attribute. The attributes of the = + <rich:editor> + component match the corresponding properties= of TinyMCE editor. + For example, a theme for the editor can be defined usin= g the + "theme" + attribute like this: - Example: - = - ]]> = - - Implementation of - <rich:editor> - provides three ways to define the properties of the c= omponent: - - = - - - Using attributes - - - Using using - <f:param> - JSF tag - - - Using configuration files that allow you to set up multi= ple configurations for all editors in your application and change them in t= he runtime - - - = - The three methods are described in details in the chapter. = - - The most important properties are implemented as attributes and you can = define them as any other attribute. - The attributes of the - <rich:editor> - component match the corresponding properties of TinyM= CE editor. = - = - - For example, a theme for the editor can be defined using the - "theme" - attribute like this: = - - - Example: - - Example: + + -]]> = - Setting a different skin for the editor can be d= one using the - "skin" - attribute. - - Another useful property that is implemented at attribute level is - "viewMode" - . = - The attribute switches between "visual" and "source" modes, toggling= between modes is performed setting the attribute to "visual" and "source" = respectively. = - Implementation of - <rich:editor> - also implies that you can change the modes dynamicall= y setting the value of the - "viewMode" - attribute using EL-expression. = - - = - - Example: - - + Setting a different skin for the editor can be done usin= g the + "skin" + attribute. + Another useful property that is implemented at attribut= e level is + "viewMode" + . The attribute switches between "visual" and= "source" modes, toggling between modes is performed setting the attribute = to "visual" and "source" respectively. Implementation of + <rich:editor> + also implies that you can change the modes d= ynamically setting the value of the + "viewMode" + attribute using EL-expression. + + + Example: + + ... @@ -133,124 +113,91 @@ ... -...]]> = - - Most configuration options that TinyMCE provides can be applied using - <f:param> - JSF tag. = - The syntax is quite simple: the - "name" - attribute should contain the option, = - the - "value" - attribute assigns some value to the option. - - - For example, this code adds some buttons to the editor and positions the= toolbar. = - - - Example: - - + Most configuration options that TinyMCE provides can be= applied using + <f:param> + JSF tag. The syntax is quite simple: the + "name" + attribute should contain the option, the + "value" + attribute assigns some value to the option. = + For example, this code adds some buttons to the editor = and positions the toolbar. + + Example: + + = -...]]> = - This is what you get as a result: -
- Setting configuration options with &= lt;f:param> - = - - - - - - -
- = - = - The third way to configure the = - <rich:editor> - is = - to use configuration file (.properties) - = - - This method eases your life if you need to configure multiple instan= ces = - of the - <rich:editor> - : you configure the editor once = - and in one spot and the configuration properties can be applied to a= ny = - - <rich:editor> - in your application. - - To implement this type of configuration you need= to take a few steps: - - - - Create a configuration file (.properties) in the classpath folder= and add some properties to it. = - Use standard syntax for the .properties files: parameter=3D= value. = - Here is an example of configuration file: - - - Example: - = - + This is what you get as a result: +
+ Setting configuration options with <f:param&g= t; + + + + + +
+ + + The third way to configure the + <rich:editor> + is to use configuration file (.properties) + + This method eases your life if you need to configure mu= ltiple instances of the + <rich:editor> + : you configure the editor once and in one sp= ot and the configuration properties can be applied to any + <rich:editor> + in your application. + To implement this type of configuration you need to take= a few steps: + + + Create a configuration file (.properties) i= n the classpath folder and add some properties to it. Use standard syntax f= or the .properties files: parameter=3Dvalue. Here is an exampl= e of configuration + file: + + Example: + + = = = = - - - - The properties stored in configuration file are passed to the - - <rich:editor> - via = - - "configuration" - attribute which takes the name of the configura= tion file = - as a value (with out .properties extension). - - - For example, if you named the configuration file "editorconfig", = you would address it as follows: - - - Example: - - + + + The properties stored in configuration file= are passed to the + <rich:editor> + via + "configuration" + attribute which takes the name o= f the configuration file as a value (with out .properties extension). + For example, if you named the configuration= file "editorconfig", you would address it as follows: + + Example: + + -...]]> = = = = - = - - - Alternately, you can use a EL-expression to = define a configuration file. = - This way you can dynamically change the sets of configuration pro= perties. = - - = - - For example, you have two configuration files "configurationAdvance= d" and "configurationSimple" and you want them to be = - applied under some condition. = - +...]]> + + + Alternately, you can use a EL-expression to= define a configuration file. This way you can dynamically change the sets = of configuration properties. + + For example, you have two configuration fil= es "configurationAdvanced" and "configurationSimple" and you want them to b= e applied under some condition. + To do this you need to bind + "configuration" + attribute to the appropriate bea= n property like this. + - To do this you need to bind - "configuration" - = - attribute to the appropriate bean property like this. - - = - - Example: - - Example: + + -...]]> = - Your Java file should look like this.<= /para> - = - + Your Java file should look like this. + + = = = = - - = - - = - = - - You also might want to add some custom plug-= ins to your editor. = - You can read about how to create a plugin i= n TinyMCE Wiki article. - - = - - Adding a custom plugin also requires a few s= teps to take. Though, the procedure is very similar to adding a configurati= on file. - = - - = - This is what you need to add a plugin: - - - Create a .properties file and put the name of the plug-i= n and a path to it into the file. - The file can contain multiple plug= -in declarations. Your .properties file should be like this. = - - - Example: - - + + + + + + You also might want to add some custom plug-ins to your= editor. You can read about how to create a plugin in TinyMCE Wiki article<= /ulink>. + + Adding a custom plugin also requires a few steps to tak= e. Though, the procedure is very similar to adding a configuration file. + + This is what you need to add a plugin: + + + Create a .properties file and put the name o= f 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. + + Example: + + = = = = = - - - - Use the - "customPlugins" - attribute to specify the .properties file with = a plugin name and a path to it. - - - If your .properties file is named "myPlugins", then your will h= ave this code on the page. - - - = Example: - - + + + Use the + "customPlugins" + attribute to specify the .proper= ties file with a plugin name and a path to it. + If your .properties file is named "myPlugin= s", then your will have this code on the page. + + Example: + + = -...]]> = = = = = - - - - Note: - -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 TinyM= CE's corresponding directory) - you should manually add required TinyMCE scripts to some project folder a= nd correct the js includes. - - = - - The implementation of the - <rich:editor> - component has two methods for handling - events. = - = - The attributes take some function name as a valu= e with is triggered on the appropriate event. You need to use standard Jav= aScript function calling syntax. - = - = - - Using attributes ( - "onchange" - , = - - "oninit" - , - - "onsave" - , - - "onsetup" - ) - - - Example: - = - + + + + Note: + Some plug-ins which available for download might = have some dependencies on TinyMCE scripts. For example, dialog pop-ups requ= ire tiny_mce_popup.js script file. Assuming that you will not plug custom p= lugins to the RF + jar with editor component (standard TinyMCE plugin= s creation implies that plugins are put into TinyMCE's corresponding direct= ory) you should manually add required TinyMCE scripts to some project folde= r and correct + the js includes. + + The implementation of the + <rich:editor> + component has two methods for handling event= s. + The attributes take some function name as a value with i= s triggered on the appropriate event. You need to use standard JavaScript f= unction calling syntax. + + + + Using attributes ( + "onchange" + , + "oninit" + , + "onsave" + , + "onsetup" + ) + + Example: + + -...]]> = - - +...]]> + + + Using + <f:param> + as a child element defining the = + "name" + attribute with one of the TinyMC= E's callbacks and the + "value" + attribute takes the function nam= e 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. = - Using - <f:param> - as a child element defining the - "name" - attribute = - with one of the TinyMCE's callbacks and the = - - "value" - attribute takes the function name you want to b= e called = - on the corresponding event as the value. Note, that the syntax in t= his case is a bit different: parentheses are not required. = - - - Example: - - Example: + + -...]]> = - - - = - The = - <rich:editor> - = - component has a build-in converter that rend= ers HTML code generated by the editor = - to Seam text (you can read more on Seam in = Seam guide.), it also interprets Seam text - passed to the = - <rich:editor> - and renders it to HTML. = - The converter can be enable with the - "useSeamText" - attribute. - - Example: - - = - This HTML code generated by editor - + + + + The + <rich:editor> + component has a build-in converter that rend= ers HTML code generated by the editor to Seam text (you can read more on Se= am in Seam + guide.), it also interprets Seam text pass= ed to the + <rich:editor> + and renders it to HTML. The converter can be= enable with the + "useSeamText" + attribute. + + Example: + + + This HTML code generated by editor + Lorem ipsum dolor sit amet, ea= commodo consequat.

-...]]> = - will be parsed to the following Seam text: - = - + will be parsed to the following Seam text: + + http://mysite.com] *dolor sit* amet, ea _commodo_ consequa= t. ...]]> - Accordingly, if the Seam text is passed to the c= omponent it will be parsed to HTML code. + Accordingly, if the Seam text is passed to the component= it will be parsed to HTML code. = -
-
- Reference Data - - Table of = - <rich:editor> = - attributes. - - - Component Identification Parameters - - - - Name - Value - - - - - component-type - org.richfaces.com= ponent.editor - - - component-class - org.richfaces.com= ponent.html.Htmleditor - - - component-family<= /entry> - org.richfaces.com= ponent.editor - - - renderer-type - org.richfaces.ren= derkit.html.editorRenderer - - - tag-class - org.richfaces.tag= lib.editorTag - - - -
- + +
+ Reference Data + + Table of <ric= h:editor> attributes. +
+ Component Identification Parameters + + + + Name + Value + + + + + component-type + org.richfaces.component.editor<= /entry> + + + component-class + org.richfaces.component.html.Ht= mleditor + + + component-family + org.richfaces.component.editor<= /entry> + + + renderer-type + org.richfaces.renderkit.html.ed= itorRenderer + + + tag-class + org.richfaces.taglib.editorTag<= /entry> + + + +
+ CSS selectors for the layout of the editor @@ -447,30 +360,30 @@ CSS property - = = + - .richfacesSkin .mceButton - Defines styles for the buttons<= /entry> = + .richfacesSkin .mceButton<= /entry> + Defines styles for the buttons<= /entry> n/a background-image - = + - .richfacesSkin .mceButtonDisabl= ed .mceIcon + .richfacesSkin .mceButtonD= isabled .mceIcon Defines styles for the icons n/a opacity - = - = - .richfacesSkin .mceIframeContai= ner + + + .richfacesSkin .mceIframeC= ontainer Defines styles for the containe= r panelBorderColor border-top-color, border-bottom= -color - = + - .richfacesSkin .= mceListBox .mceText + .richfacesSkin&n= bsp;.mceListBox .mceText Defines styles f= or the list box generalFamilyFont font-family @@ -483,67 +396,64 @@ tableBackgroundColor background - = + - .richfacesSkin .mceExternalTool= bar + .richfacesSkin .mceExterna= lToolbar Defines styles for the toolbar<= /entry> panelBorderColor border-color - = + .richfacesSkin .mceMenu Defines styles for the menus panelBorderColor border-color - = + - .richfacesSkin .mceMenu .mceMen= uItemActive + .richfacesSkin .mceMenu&nb= sp;.mceMenuItemActive Defines styles for the active m= enu items additionalBackgroundColor background-color - = + - .richfacesSkin .mceSeparator + .richfacesSkin .mceSeparat= or Defines styles for the buttons = separator n/a background-image - = + - .richfacesSkin table.mceLayout<= /entry> + .richfacesSkin table.mceLa= yout Defines styles for the table la= yout panelBorderColor border-left-color, border-right= -color - = + - .richfacesSkin table.mceToolbar= + .richfacesSkin table.mceTo= olbar Defines styles for the rows of = icons within toolbar n/a padding - = + -
- You can find all necessary information about style classes redefini= tion in = - Definition of Custom Style Classes = - section. -
-
- Relevant Resources Links - = - The = - <rich:editor> - is based on TinyMCE editor and supports almost all it= s features and properties some of which are not described here since you ca= n find more detailed documentation on them on the official web site. - - = - = - - On RichFaces LiveDemo page you can see an = example of - <rich:editor> - usage and sources for the given = example. -
-
\ No newline at end of file + You can find all necessary information about style cl= asses redefinition in Definition of Custom S= tyle Classes section.
+
+ Relevant Resources Links + + The + <rich:editor> + is based on TinyMCE editor and supports almo= st all its features and properties some of which are not described here sin= ce you can find more detailed documentation on them on the official web site. + + + + + On RichFaces LiveDemo page you ca= n see an example of + <rich:editor> + usage and sources for the given example. +
+ Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/inclu= ded/rich_modalPanel.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_modalPanel.xml 2009-09-10 13:39:11 UTC (rev 15525) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_modalPanel.xml 2009-09-10 13:41:53 UTC (rev 15526) @@ -423,7 +423,7 @@ Defines transparency for blockin= g <div> element - rich-mpnl-ovf-hd + .rich-mpnl-ovf-hd Defines style for block element = content = --===============8506705493121053117==--