From richfaces-svn-commits at lists.jboss.org Thu Sep 10 10:25:43 2009 Content-Type: multipart/mixed; boundary="===============0859089871137378019==" 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: r15528 - branches/community/3.3.X/docs/userguide/en/src/main/docbook/included. Date: Thu, 10 Sep 2009 10:25:38 -0400 Message-ID: <200909101425.n8AEPcRO030595@svn01.web.mwc.hst.phx2.redhat.com> --===============0859089871137378019== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: ochikvina Date: 2009-09-10 10:25:37 -0400 (Thu, 10 Sep 2009) New Revision: 15528 Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ric= h_editor.xml Log: https://jira.jboss.org/jira/browse/RF-7803 - the tables with style classes = (selectors) are restructured; 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:43:01 UTC (rev 15527) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_editor.xml 2009-09-10 14:25:37 UTC (rev 15528) @@ -1,110 +1,130 @@
- < 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: + + < + 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> + - ]]> - Implementation of - <rich:editor> - provides three ways to define the properties= of the component: + + = + = - - - 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: +
+
+ 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: + - Example: - - 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: + + -]]> - 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: - - = + 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: + + ... @@ -113,91 +133,124 @@ ... -...]]> - 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 <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: - - = + 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: + = + - - - 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: - - = = = = + + + + 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: + + -...]]> - - - 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. - +...]]> = = = = + = + + + 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. = + - Example: - - + "configuration" + = + attribute to the appropriate bean property like this. + + = + + Example: + + -...]]> - Your Java file should look like this. - - = + Your Java file should look like this.<= /para> + = + - - - - - - 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: - - = = = = + + = + + = + = + + 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: + + - - - 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: - - = = = = = + + + + 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: + + = -...]]> - - - - 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: - - = = = = = + + + + 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: + = + -...]]> - - - 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. = +...]]> = + + - Example: - - + <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: + + -...]]> - - - - 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 - = + + + = + 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 + 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 component= it will be parsed to HTML code. + Accordingly, if the Seam text is passed to the c= omponent it will be parsed to HTML code. = -
-
- 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 + +
+ 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 + + + +
+ + Style classes (selectors) with the corresponding skin parame= ters - Class name (selector) + Class (selector) name Description Skin Parameter - CSS property + CSS properties mapped - - - .richfacesSkin .mceButton<= /entry> - Defines styles for the buttons<= /entry> - n/a - background-image - - - - .richfacesSkin .mceButtonD= isabled .mceIcon - Defines styles for the icons - n/a - opacity - - - - .richfacesSkin .mceIframeC= ontainer - Defines styles for the containe= r - panelBorderColor - border-top-color, border-bottom= -color - - - - .richfacesSkin&n= bsp;.mceListBox .mceText - Defines styles f= or the list box - generalFamilyFont - font-family - - - panelBorderColor - border-color - - - tableBackgroundColor - background - - - - .richfacesSkin .mceExterna= lToolbar - Defines styles for the toolbar<= /entry> - panelBorderColor - border-color - - - - .richfacesSkin .mceMenu - Defines styles for the menus - panelBorderColor - border-color - - - - .richfacesSkin .mceMenu&nb= sp;.mceMenuItemActive - Defines styles for the active m= enu items - additionalBackgroundColor - background-color - - - - .richfacesSkin .mceSeparat= or - Defines styles for the buttons = separator - n/a - background-image - - - - .richfacesSkin table.mceLa= yout - Defines styles for the table la= yout - panelBorderColor - border-left-color, border-right= -color - - - - .richfacesSkin table.mceTo= olbar - Defines styles for the rows of = icons within toolbar - n/a - padding - + = + + .richfacesSkin a:hover, .richfacesSkin a= :link, .richfacesSkin a:visited, .richfacesSkin a:active + Defines styles for links state = + generalTextColor + color + + = + + .richfacesSkin table + Defines styles for the wrapper <table= > element of the editor = + additionalBackgroundColor + background + + = + + .richfacesSkin iframe + Defines styles for the editor text area<= /entry> = + tableBackgroundColor + background + + = + + .richfacesSkin .mceExternalToolbar + Defines styles for the toolbar + panelBorderColor + border-color + + = + + .richfacesSkin table.mceLayout + Defines styles for the table layout + panelBorderColor + border-left-color, border-right-color + + = + + .richfacesSkin table.mceLayout tr.mceFir= st td + Defines styles for the toolbar elements<= /entry> + panelBorderColor + border-top-color + + = + + .richfacesSkin table.mceLayout tr.mceLas= t td + Defines styles for the editor window + panelBorderColor + border-bottom-color + + = + = + .richfacesSkin .mceIframeContainer + Defines styles for the editor container<= /entry> + panelBorderColor + border-top-color, border-bottom-color + + = + + .richfacesSkin .mceStatus= bar + Defines styles for the st= atus bar + generalFamilyFont + font-family + + + generalTextColor + color + + = + = + .richfacesSkin a.mceButtonEnabled:hover<= /entry> + Defines styles for the editor buttons ho= vered + headerBackgroundColor + background-color + + = + = + .richfacesSkin span.mceButtonLabel + Defines styles for the editor buttons la= bels + generalFamilyFont + font-family + + = + + .richfacesSkin .mceListBo= x .mceText + Defines styles for the li= st box + generalFamilyFont + font-family + + + panelBorderColor + border-color + + + tableBackgroundColor + background + + = + = + .richfacesSkin table.mceListBoxEnabled:h= over .mceText, .richfacesSkin .mceListBoxSelected .mceText + Define styles for the list box hovered, = selected respectively + tableBackgroundColor + background + + = + + .richfacesSkin div.mceCol= orSplitMenu table + Defines styles for the wr= apper <table> element of the popup element for color selecting + tableBackgroundColor + background + + + panelBorderColor + border-color + + = + = + .richfacesSkin .mceColorSplitMenu a + Defines styles for the items in the popu= p element for color selecting + panelBorderColor + border-color + + = + + .richfacesSkin .mceColorS= plitMenu a.mceMoreColors + Defines styles for the &q= uot;More Colors" button + panelBorderColor + border-color + + + generalFamilyFont + font-family + + = + + .richfacesSkin .mceColorS= plitMenu a.mceMoreColors:hover + Defines styles for the &q= uot;More Colors" button hovered + panelBorderColor + border-color + + + additionalBackgroundColor + background-color + + = + = + .richfacesSkin a.mceMoreColors:hover + Defines styles for the "More Colors= " button hovered + headerBackgroundColor + border-color + + = + = + .richfacesSkin .mceColorPreview + Defines styles for the color preview + tableBorderColor + background + + = + + .richfacesSkin .mceMenu + Defines styles for the menus + panelBorderColor + border-color + + = + + .richfacesSkin .mceMenu table + Defines styles for the wrapper <table= > element of the menu + tableBackgroundColor + background + + = + + .richfacesSkin .mceMenu .= mceText + Defines styles for the me= nus labels + generalFamilyFont + font-family + + + generalTextColor + color + + = + + .richfacesSkin .mceMenu .mceMenuItemActi= ve + Defines styles for the active menu items= + additionalBackgroundColor + background-color + + = + + .richfacesSkin .mceMenu .mceMenuItemEnab= led a:hover + Defines styles for the enabled menu item= s hovered + additionalBackgroundColor + background-color + + = + + .richfacesSkin td.mceMenuItemSeparator + Defines styles for the menu items separa= tor + panelBorderColor + background + + = + + .richfacesSkin .mceMenuIt= emTitle a + Defines styles for the ti= tles of the menu items + additionalBackgroundColor + background + + + panelBorderColor + border-bottom-color + + = + + .richfacesSkin .mceMenuItemDisabled .mce= Text + Defines styles for the disabled menu ite= ms + tabDisabledTextColor + color + + = + + .richfacesSkin .mceBlocker + Defines styles for the editor blocker + tableBackgroundColor + background + + = + + .richfacesSkin .mcePlaceHolder + Defines styles for the editor place hold= er + tableBorderColor + border-color + -
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. -
-
+ + = + + Style classes (selectors) without skin parameters + + + + Class name + Description + + + + + .richfacesSkin table.mceToolbar + Defines styles for the rows of icons within toolbar + + = + + .richfacesSkin .mceToolbar .mceToolbarStart span + Defines styles for the icon of the toolbar start element + + = + + .richfacesSkin .mceToolbar .mceToolbarEnd span + Defines styles for the icon of the toolbar end element + + = + + .richfacesSkin .mceIcon + Defines styles for the icons of the toolbar buttons + + = + + .richfacesSkin .mceButton + Defines styles for the buttons = + + = + + .richfacesSkin .mceSeparator + Defines styles for the buttons separator + + = + + .richfacesSkin .mceButtonDisabled .mceIcon + Defines styles for the icons of the disabled buttons + + = + + .richfacesSkin .mceListBox .mceOpen + Defines styles for the icons of the list box "Open&quo= t; button + + = + + .richfacesSkin .mceSplitButton a.mceOpen + Defines styles for the icons of the split buttons for color= selecting + + = + + .richfacesSkin .mceSplitButton span.mceAction + Defines styles for the icons of the split buttons + + = + + .richfacesSkin .mceMenuItemSelected .mceIcon + Defines styles for the icons of the selected menu items + + = + + .richfacesSkin .mceNoIcons .mceMenuItemSelected a + Defines styles for the selected menu items without no icons= + + = + + .richfacesSkin .mceMenuItemSub a + Defines styles for the icon of the submenu item + + = + + .richfacesSkin .mceProgress + Defines styles for the editor progress icon + + = + + .richfacesSkin .mceStatusbar a.mceResize + Defines styles for the resize button + + + +
+ = + 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 --===============0859089871137378019==--