Author: msorokin
Date: 2008-12-03 13:14:29 -0500 (Wed, 03 Dec 2008)
New Revision: 11530
Modified:
trunk/docs/userguide/en/src/main/docbook/included/editor.xml
Log:
https://jira.jboss.org/jira/browse/JBDS-426
Configuration attribute is documented
Modified: trunk/docs/userguide/en/src/main/docbook/included/editor.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/editor.xml 2008-12-03 18:14:29 UTC (rev 11529)
+++ trunk/docs/userguide/en/src/main/docbook/included/editor.xml 2008-12-03 18:14:29 UTC (rev 11530)
@@ -196,8 +196,49 @@
</itemizedlist>
- <para></para>
+ <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 there. The file can contain multiple plug-ins 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>"customPlugins"</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 could have some dependencies to TinyMCE scripts.
+For example, dialog pop-ups requires tiny_mce_popup.js.
+Taking into consideration that developer will not plug our custom plugins to the RF jar with editor component
+(as opposite to standard tinyMCE plugins creation, which means that plugins will be put into tinyMCE corersponding directory) -
+ the developer should manually add needed tinyMCE scripts to some folder and correct the js includes.
+ </para>
+ </note>
+
+ </itemizedlist>
+
</section>
@@ -213,58 +254,7 @@
<!-- End of JavaScript API-->
<section>
<title>JavaScript API</title>
- <table>
- <title>JavaScript API</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Function</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>enable()</entry>
- <entry>Enables the component</entry>
- </row>
- <row>
- <entry>disable()</entry>
- <entry>Disables the component</entry>
- </row>
- <row>
- <entry>stop()</entry>
- <entry>Stops the uploading
- process</entry>
- </row>
- <row>
- <entry>clear()</entry>
- <entry>Removes all files from the list.
- The function can also get the
- $('id').component.entries[i]
- as a parameter to remove a
- particular file. </entry>
- </row>
- <row>
- <entry> submitForm() </entry>
- <entry> Submits form to server. All
- added files will be put to
- model and event. </entry>
- </row>
- <row>
- <entry> beforeSubmit() </entry>
- <entry> Sets up necessary request
- parameters for file uploading
- and submits form to server by
- command button. This method
- should be used together with
- commands </entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
-
-
+
@@ -282,7 +272,7 @@
<property>skin parameters.</property>
</emphasis></para>
<para>There are two ways to redefine the appearance of all <emphasis role="bold">
- <property><rich:fileUpload></property>
+ <property><rich:editor></property>
</emphasis> components at once: <itemizedlist>
<listitem>
<para>Redefine the corresponding skin
@@ -291,7 +281,7 @@
<listitem>
<para> Add to your style sheets style classes used
by a <emphasis role="bold">
- <property><rich:fileUpload></property>
+ <property><rich:editor></property>
</emphasis> component</para>
</listitem>
</itemizedlist>
@@ -301,531 +291,29 @@
<section>
<title>Skin Parameters Redefinition</title>
- <table>
+
<title>Skin parameters redefinition for a component</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a font</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalFamilyFont</entry>
- <entry>font-family</entry>
- </row>
- <row>
- <entry>generalSizeFont</entry>
- <entry>font-size</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a toolbar</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>additionalBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-bottom-color</entry>
- </row>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>border-top-color</entry>
- </row>
- <row>
- <entry>tableBackgroundColor</entry>
- <entry>border-left-color</entry>
- </row>
-
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for items in the list</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-bottom-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a "Cancel",
- "Clear" links</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalLinkColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>trimColor</entry>
- <entry>background-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a button border</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a highlighted button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>trimColor</entry>
- <entry>background-color</entry>
- </row>
- <row>
- <entry>selectControlColor</entry>
- <entry>border-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for a pressed button</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>selectControlColor</entry>
- <entry>border-color</entry>
- </row>
- <row>
- <entry>additionalBackgroundColor</entry>
- <entry>background-color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Skin parameters redefinition for "Upload",
- "Clean" buttons</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>generalTextColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a disabled
- "Start" button icon</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Skin parameters redefinition for a disabled
- "Clear" button icon</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>tableBorderColor</entry>
- <entry>color</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
+
</section>
<section>
<title>Definition of Custom Style Classes</title>
- <para>The following picture illustrates how CSS classes define styles for
- component elements.</para>
- <figure>
- <title>Classes names</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/fileUpload_cn.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <figure>
- <title>Classes names</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/fileUpload_cn2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <table>
- <title>Classes names that define buttons representation</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-fileupload-button</entry>
- <entry>Defines styles for a
- buttons</entry>
- </row>
- <row>
- <entry>rich-fileupload-button-border</entry>
- <entry>Defines styles for a border of
- buttons</entry>
- </row>
- <row>
- <entry>rich-fileupload-button-light</entry>
- <entry>Defines styles for a highlight of
- button</entry>
- </row>
- <row>
- <entry>rich-fileupload-button-press</entry>
- <entry>Defines styles for a pressed
- button</entry>
- </row>
- <row>
- <entry>rich-fileupload-button-dis</entry>
- <entry>Defines styles for a disabled
- button</entry>
- </row>
- <row>
- <entry>rich-fileupload-button-selection</entry>
- <entry>Defines styles for
- "Upload",
- "Clean"
- buttons</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
+
+
- <table>
- <title>Classes names that define the representation of the buttons'
- icons</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-fileupload-ico</entry>
- <entry>Defines styles for an
- icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-add</entry>
- <entry>Defines styles for a
- "Add" button
- icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-start</entry>
- <entry>Defines styles for a
- "Upload"
- button icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-stop</entry>
- <entry>Defines styles for a
- "Stop"
- button icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-clear</entry>
- <entry>Defines styles for a
- "Clear"
- button icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-add-dis</entry>
- <entry>Defines styles for a disabled
- "Add" button
- icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-start-dis</entry>
- <entry>Defines styles for a disabled
- "Upload"
- button icon</entry>
- </row>
- <row>
- <entry>rich-fileupload-ico-clear-dis</entry>
- <entry>Defines styles for a disabled
- "Clear"
- button icon</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <table>
- <title>Classes names that define list items representation</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-fileupload-table-td</entry>
- <entry>Defines styles for a wrapper
- <td> element of
- a list items</entry>
- </row>
- <row>
- <entry>rich-fileupload-anc</entry>
- <entry>Defines styles for
- "Cancel",
- "Stop",
- "Clear"
- links</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
-
- <para>In order to redefine styles for all <emphasis role="bold">
- <property><rich:fileUpload></property>
- </emphasis> components on a page using CSS, it's enough to
- create classes with the same names (possible classes could be found in
- the tables <link linkend="fileUploadCN"> above</link>) and define
- necessary properties in them. </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
-.rich-fileupload-anc{
- font-weight:bold;
- text-decoration:none;
-}
-...]]></programlisting>
-
- <para>This is the result:</para>
-
- <figure>
- <title>Redefinition styles with predefined classes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/fileUpload_pc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>In the example above the font weight and text decoration for
- "Cancel" and "Clear" links are
- changed.</para>
-
- <para> Also it's possible to change styles of particular <emphasis
- role="bold">
- <property><rich:fileUpload></property>
- </emphasis> component. In this case you should create own style
- classes and use them in the corresponding <emphasis role="bold">
- <property><rich:fileUpload></property>
- </emphasis>
- <emphasis>
- <property>styleClass</property>
- </emphasis> attributes. An example is placed below: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
-.myClass{
- font-weight:bold;
-}
-...]]></programlisting>
- <para> The <emphasis>
- <property>"addButtonClass"</property>
- </emphasis> attribute for <emphasis role="bold">
- <property><rich:fileUpload></property>
- </emphasis> is defined as it's shown in the example below: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[<rich:fileUpload ... addButtonClass="myClass"/>
-]]></programlisting>
-
- <para>This is the result:</para>
- <figure>
- <title>Redefinition styles with own classes and <emphasis>
- <property>styleClass</property>
- </emphasis> attributes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/fileUpload_oc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>As it could be seen on the picture above, the font style for
- "Add" button is changed.</para>
-
</section>
<section>
<title>Relevant Resources Links</title>
<para><ulink
- url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=fileUpload"
+ url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=editor"
>Here</ulink> you can see an example of <emphasis
role="bold">
- <property><rich:fileUpload></property>
+ <property><rich:editor></property>
</emphasis> usage and sources for the given example. </para>
</section>
-</section>
-<!--para>In order to encode form around <emphasis role="bold">
- <property><rich:fileUpload></property>
- </emphasis> component you could confine this area by <emphasis role="bold">
- <property><h:form></property>
- </emphasis>/<emphasis role="bold">
- <property></h:form></property></emphasis> tags.
- </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
- <h:form>
- <rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}"
- acceptedTypes="html" immediateUpload="true"/>
- <a4j:commandLink style="font-weight: bold; width: 200px;" value="Show files uploaded:" reRender="files_list">
- <h:dataTable value="#{bean.fileList}" var="file" id="files_list" style="width: 500px">
- <h:column>
- <h:outputText value="#{file.fileName}"></h:outputText>
- </h:column>
- </h:dataTable>
- </h:form>
- ...]]></programlisting>
- <para>This is a result:</para>
- <figure>
- <title><emphasis role="bold">
- <property><rich:fileUpload></property>
- </emphasis>at server-side</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/fileUpload11.png"/>
- </imageobject>
- </mediaobject>
- </figure-->
+</section>
\ No newline at end of file