Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works.

Description

Create a Rich Text Editor based on FCK editor (www.fckeditor.net).

Parameters

Name

Required

Default

Type

Description

checkBrowser false true Boolean Whether the rich text editor should check for browser compatibility when rendering its toolbar
displayError false true Boolean Whether should the rich text editor display error when it fails to render etc.
autoDetectLanguage false true Boolean Tells the editor to automatically detect the user language preferences to adapt its interface language. With Internet Explorer, the language configured in the Windows Control Panel is used. With Firefox, the browser language is used
baseHref false String Base URL used to resolve links (on images, links, styles, etc.). For example, if BaseHref is set to 'http://www.fredck.com', an image that points to "/images/Logo.gif" will be interpreted by the editor as "http://www.fredck.com/images/Logo.gif", without touching the "src" attribute of the image.
basePath false /webwork/static/richtexteditor/ String Set the dir where the FCKeditor files reside on the server
contentLangDirection false ltr String Sets the direction of the editor area contents. Either ltr or rtl
customConfigurationsPath false String Set the path of a custom file that can override some configurations. It is recommended to use absolute paths (starting with /), like /myfckconfig.js.
debug false false Boolean Enables the debug window to be shown when calling the FCKDebug.Output() function.
defaultLanguage false en String Sets the default language used for the editor's interface localization. The default language is used when the AutoDetectLanguage options is disabled or when the user language is not available.
editorAreaCSS false css/fck_editorarea.css String Set the CSS styles file to be used in the editing area. In this way you can point to a file that reflects your web site styles
enableSourceXHTML false true String Tells the editor to process the HTML source to XHTML when switching from WYSIWYG to Source view
enableXHTML false true String Tells the editor to process the HTML source to XHTML on form post.
fillEmptyBlocks false true String Block elements (like P, DIV, H1, PRE, etc...) are forced to have content (a &nbsp. Empty blocks are "collapsed" by while browsing, so a empty <p></p> is not visible. While editing, the editor "expand" empty blocks so you can insert content inside then. Setting this option to "true" results useful to reflect the same output when browsing and editing.
flashBrowserURL false /webwork/static/ richtexteditor/ editor/filemanager/ browser/default/browser.html? Type=Flash& Connector=connectors/jsp/connector.action String Sets the URL of the page called when the user clicks the 'Browse Server' button in the "Flash" dialog window. In this way, you can create your custom Flash Browser that is well integrated with your system.
flashUploadURL false /webwork/static/ richtexteditor/ editor/filemanager/ upload/uploader.action? Type=Flash string Sets the URL of the upload handler called when the user clicks the 'Send it to server' button in the "Flash" dialog window. In this way, you can create your custom Flash Uploader that is well integrated with your system.
fontColors false 000000, 993300, 333300, 003300, 003366, 000080, 333399, 333333, 800000, FF6600, 808000, 808080, 008080, 0000FF, 666699, 808080, FF0000, FF9900, 99CC00, 339966, 33CCCC, 3366FF, 800080, 999999, FF00FF, FFCC00, FFFF00, 00FF00, 00FFFF, 00CCFF, 993366, C0C0C0, FF99CC, FFCC99, FFFF99, CCFFCC, CCFFFF, 99CCFF, CC99FF, FFFFFF string Sets the colors that must be shown in the colors panels (in the toolbar).
fontFormats false p; div; pre; address; h1; h2; h3; h4; h5; h6 string Sets the list of formats to be shown in the "Format" toolbar command.
fontNames false Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana string Sets the list of fonts to be shown in the "Font" toolbar command.
fontSizes false 1/xx-small; 2/x-small; 3/small; 4/medium; 5/large; 6/x-large; 7/xx-large string Sets the list of font sizes to be shown in the "Size" toolbar command.
forcePasteAsPlainText false false boolean Converts the clipboard contents to pure text on pasting operations
forceSimpleAmpersand false false boolean Forces the ampersands (&) on tags attributes to not be converted to '&amp;' This conversion is a W3C requirement for XHTML, so it is recommended to leave this option to 'false'.
formatIndentator false ' ' boolean Sets the characters to be used when indenting the HTML source when formatting it. Useful values are a sequence of spaces (' ') or a tab char ('\t').
formatOutput false true boolean The output HTML generated by the editor will be processed and formatted.
formatSource false true boolean The HTML shown by the editor, while switching from WYSIWYG to Source views, will be processed and formatted
fullPage false false boolean Enables full page editing (from <HTML> to </HTML>). It also enables the 'Page Properties' toolbar button.
geckoUseSPAN false true boolean Tells Gecko browsers to use SPAN instead of <B>, <I> and <U> for bold, italic an underline
height false 200 string Set the height of the rich text editor
imageBrowserURL false /webwork/static/ richtexteditor/ editor/filemanager/ browser/default/browser.html? Type=Image& Connector=connectors/jsp/connector.action string Sets the URL of the page called when the user clicks the 'Browse Server' button in the 'Image' dialog window. In this way, you can create your custom Image Browser that is well integrated with your system.
imageUploadURL false /webwork/static/ richtexteditor/ editor/filemanager/ upload/uploader.action? Type=Image string Sets the URL of the upload handler called when the user clicks the 'Send it to server' button in the 'Image' dialog window. In this way, you can create your custom Image Uploader that is well integrated with your system.
linkBrowserURL false /webwork/static/ richtexteditor/ editor/filemanager/ browser/default/browser.html? Type=File& Connector=connectors/jsp/connector.action string Sets the URL of the page called when the user clicks the 'Browse Server' button in the 'Link' dialog window. In this way, you can create your custom File Browser that is well integrated with your system.
linkUploadURL false /webwork/static/ richtexteditor/ editor/filemanager/ upload/uploader.action? Type=File string Sets the URL of the upload handler called when the user clicks the 'Send it to server' button in the 'Link' dialog window. In this way, you can create your custom Link Uploader that is well integrated with your system.
pluginsPath false /webwork/static/richtexteditor/plugins/ string Sets the base path used when looking for registered plugins.
skinPath false /webwork/static/richtexteditor/skins/default string Sets the path to the skin (graphical interface settings) to be used by the editor.
startupFocus false false boolean Forces the editor to get the keyboard input focus on startup (page load)
stylesXmlPath false /webwork/static/richtexteditor/fckstyles.xml string Sets the path to the XML file that has the definitions and rules of the styles used by the 'Style' toolbar command
tabSpaces false 0 string Set the number of spaces (&nbsp) to be inserted when the user hits the 'tab' key. This is an Internet Explorer only feature. Other browsers insert spaces automatically by default.
toolbarCanCollapse false true boolean Tells the editor that the toolbar can be Collapsed/Expanded by the user when clicking the vertical bar placed on the left of it (on the right for 'rtl' languages).
toolbarSet false Default string Set the name of the toolbar to display
toolbarStartExpanded false true boolean Decide if the toolbar should be expanded when the rich text editor is loaded
useBROnCarriageReturn false true boolean Decide if a <br/> should be used in place of the occurence of a carriage return
width false 100% string set the width of the rich text editor
allowFlashBrowse false true boolean determine if to allow flash browsing
allowFlashUpload false true boolean determine if to allow flash upload
allowImageBrowse false true boolean determine if to allow image browsing
allowImageUpload false true boolean determine if to allow image uploading
allowLinkBrowse false true boolean determine if to allow link browsing
allowLinkUpload false true boolean determine if to allow link uploading
flashUploadAllowedExtension false .(swf|fla)$ string regexp for allowed flash upload file format
flashUploadDeniedExtension false string regexp for deinied flash upload file format
imageUploadAllowedExtension false .(jpg|gif|jpeg|png)$ string regexp for allowed image upload file format
imageUploadDeniedExtension false string regexp for denied image upload file format
linkUploadAllowedExtension false string regexp for allowed link upload file format
linkUploadDeniedExtension false .(php| php3| php5| phtml| asp| aspx| ascx| jsp| cfm| cfc| pl| bat| exe| dll| reg| cgi)$ string regexp for denied link upload file format
smileyImages false   Object/String js array of smilies files to be included
smileyPath false /webwork/static/ richtexteditor/editor/ images/smiley/msn/ string path where smilies are located
theme false   Object/String The theme (other than default) to use for rendering the element
templateDir false   Object/String The template directory (other than default) to used to find the themes and hence the template.
template false   Object/String The template (other than default) to use for rendering the element
cssClass false   Object/String The css class to use for element
cssStyle false   Object/String The css style definitions for element ro use
title false   Object/String Set the html title attribute on rendered html element
disabled false   Object/String Set the html disabled attribute on rendered html element
label false   Object/String Label expression used for rendering a element specific label
labelPosition false left Object/String deprecated.
labelposition false   Object/String define label position of form element (top/left)
requiredposition false   Object/String define required position of required form element (left|right)
name false   Object/String The name to set for element
required false false Boolean If set to true, the rendered element will indicate that input is required
tabindex false   Object/String Set the html tabindex attribute on rendered html element
value false   Object/String Preset the value of input element.
onclick false   Object/String Set the html onclick attribute on rendered html element
ondblclick false   Object/String Set the html ondblclick attribute on rendered html element
onmousedown false   Object/String Set the html onmousedown attribute on rendered html element
onmouseup false   Object/String Set the html onmouseup attribute on rendered html element
onmouseover false   Object/String Set the html onmouseover attribute on rendered html element
onmousemove false   Object/String Set the html onmousemove attribute on rendered html element
onmouseout false   Object/String Set the html onmouseout attribute on rendered html element
onfocus false   Object/String Set the html onfocus attribute on rendered html element
onblur false   Object/String Set the html onblur attribute on rendered html element
onkeypress false   Object/String Set the html onkeypress attribute on rendered html element
onkeydown false   Object/String Set the html onkeydown attribute on rendered html element
onkeyup false   Object/String Set the html onkeyup attribute on rendered html element
onselect false   Object/String Set the html onselect attribute on rendered html element
onchange false   Object/String Set the html onchange attribute on rendered html element
accesskey false   Object/String Set the html accesskey attribute on rendered html ekement
tooltip false String Set the tooltip of this particular component
tooltipConfig false String Set the tooltip configuration
id false   Object/String id for referencing element. For UI and form tags it will be used as HTML id attribute

Examples

<ww:richtexteditor 
		toolbarCanCollapse="false"
		width="700"
		label="Description 1" 
		name="description1" 
		value="Some Content I keyed In In The Tag Itself"
		/>

Server Side Browsing

It is possible to have a rich text editor do server side browsing when for example the image button is clicked. To integrate this functionality with webwork, one need to defined the following action definition typically in xwork.xml

  <package name="richtexteditor-browse" extends="webwork-default" 
  namespace="/webwork/richtexteditor/editor/filemanager/browser/default/connectors/jsp">
  	<action name="connector" 
     class="com.opensymphony.webwork.components.DefaultRichtexteditorConnector" 
     method="browse">
  		<result name="getFolders" type="richtexteditorGetFolders" />
  		<result name="getFoldersAndFiles" type="richtexteditorGetFoldersAndFiles" />
  		<result name="createFolder" type="richtexteditorCreateFolder" />
  		<result name="fileUpload" type="richtexteditorFileUpload" />
  	</action>
  </package>

By default whenever a browse command is triggered (eg. by clicking on the 'image' button and then 'browse server' button, the url '/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?&Type=Image&Connector=connectors/jsp/connector.action'. The page browser.html which comes with FCK Editor will trigger the url '/webwork/richtexteditor/editor/filemanager/browser/default/connectors/jsp/connector.action' which will caused the webwork's DefaultRichtexteditorConnector to be executed. The trigerring url could be changed by altering the 'imageBrowseURL'. There 3 types of such related url, namely 'imageBrowseURL', 'linkBrowseURL' and 'flashBrowseURL'. It is recomended that the default one being used. One could change the Connector parameter instead. For example

/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?
&Type=Image&Connector=connectors/jsp/connector.action

could be changed to

/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?
&Type=Image&Connector=myLittlePath/myConnector.action

In this case the action will need to have a namespace of '/webwork/richtexteditor/editor/filemanager/browser/default/myLittlePath' and action name of 'myConnector'

By default the action method that needs to be defined in xwork.xml needs to be 'browse'. If this needs to be something else say, myBrowse, the following could be used

  public String myBrowse() {
      browse();
  }

Server Side Uploading

It is possible for the richtexteditor to do server side uploading as well. For example when clicking on the 'Image' button and then the 'Upload' tab and then selecting a file from client local machine and the clicking 'Send it to the server'. To integrate this functionality with webwork, one need to defined the following action definition typically in xwork.xml

  <package name="richtexteditor-upload" extends="webwork-default" 
  namespace="/webwork/richtexteditor/editor/filemanager/upload">
	<action name="uploader" 
      class="com.opensymphony.webwork.components.DefaultRichtexteditorConnector" 
      method="upload">
		<result name="richtexteditorFileUpload" />
	</action>    
  </package>

By default whenever an upload command is triggered, a '/webwork/static/richtexteditor/editor/filemanager/upload/uploader.action?Type=Image' will be issued. This could be changed by setting the imageUploadURL attribute of the tag. When this link is issued, the webwork action will get executed. There's 3 such related upload url namely, 'imageUploadURL', 'linkUploadURL' and 'flashUploadURL'. It is recomended that the default one being used. However one could change the url, but need to include the Type parameter. For example

/webwork/static/richtexteditor/editor/filemanager/upload/uploader.action?Type=Image

could be changed to

/webwork/static/richtexteditor/editor/filemanager/upload/aDifferentUploader.action?Type=Image

In this case the action will need to have a namespace of '/webwork/static/richtexteditor/editor/filemanager/upload' and action name of 'aDifferentUploader'

By default the action method that needs to be defined in xwork.xml needs to be 'upload'. If this needs to be something else say, myUpload, the following could be used

  public String myUpload() {
      upload();
  }

WebWork Action

AbstractRichtexteditorConnector

An abstract class to be extended in order for the Rich text editor to perform server-side browsing and uploading.

The webwork action that handles the server-side browsing and uploading needs to extends from AbstractRichtexteditorConnector.

There are four abstract methods need to be implemented, namely

 protected abstract String calculateServerPath(String serverPath, String folderPath, 
       String type) throws Exception;
 protected abstract Folder[] getFolders(String virtualFolderPath, String type) 
       throws Exception;
 protected abstract FoldersAndFiles getFoldersAndFiles(String virtualFolderPath, 
       String type) throws Exception;
 protected abstract CreateFolderResult createFolder(String virtualFolderPath, 
       String type, String newFolderName) throws Exception;
 protected abstract FileUploadResult fileUpload(String virtualFolderPath, 
       String type, String filename, String contentType, java.io.File newFile) 
       throws Exception;
 protected abstract void unknownCommand(String command, String virtualFolderPath, 
       String type, String filename, String contentType, java.io.File newFile) 
       throws Exception;

browse method

The method that does the functionality when the richtexteditor 'browse' command is issued.

Following are the result name that gets returned depending on the actual 'browse' command.

Browse Command Result Name
GetFolders getFolders
GetFoldersAndFiles getFoldersAndFiles
CreateFolder createFolder
FileUpload fileUpload

upload method

The method that does the functionality when the richtexteditor 'upload' command is '/webwork/richtexteditor/data/' issued.

It return a result name of 'fileUpload'.

getFolders method

Method that gets called when a 'GetFolders' command is issued by the rich text editor. This method should search the server-side and return an Folder[] that the server side has.

The folder path queried by the rich text editor is folderPath. While the type of could be one of 'Image', 'Link' or 'Flash'.

getFoldersAndFiles method

Method that gets called when a 'GetFoldersAndFiles' command is issued by the rich text editor. This method should typically search the server-side for files and folders under the provided virtualFolderPath and return a FoldersAndFiles object.

The folder path queried by the richtexted editor is virtualFolderPath. While the type could be one of 'Image', 'Link' or 'Flash'.

createFolder method

Method that gets called when a 'CreateFolder' command is issued by the rich text editor. This method would typically create a folder in the server-side if it is allowed to do so and return the result through CreateFolderResult object. CreateFolderResult contains static methods to return the available results.

The folder path queried by the richtexted editor is virtualFolderPath. While the type could be one of 'Image', 'Link' or 'Flash'. The new folder name to be created is newFolderName.

fileUpload method

Method that gets called when a 'FileUpload' command is issued by the rich text editor. This method would typically handle the file upload and return a FileUploadResult object. FileUploadResult contains only static methods that could create the available results.

The folder path queried by the richtexted editor is virtualFolderPath. While the type could be one of 'Image', 'Link' or 'Flash'. The upload file name is filename while its content type is conetnType and its content could be read off the newFile object.

Result

AbstractRichtexteditorResult

Abstract result for all Rich Text Editor results. It contains common methods that might come in handy to its subclass.

Configuration of result necessary in xwork.xml (is already there by default) are as follows:

 <!-- Results necessary when using 'browse server' and 'upload' feature of Richtexteditor -->
 <result-type name="richtexteditorGetFolders" 
                 class="com.opensymphony.webwork.views.jsp.ui.RichtexteditorGetFoldersResult" />
 <result-type name="richtexteditorGetFoldersAndFiles" 
                 class="com.opensymphony.webwork.views.jsp.ui.RichtexteditorGetFoldersAndFilesResult" />
 <result-type name="richtexteditorCreateFolder" 
                 class="com.opensymphony.webwork.views.jsp.ui.RichtexteditorCreateFolderResult" />
 <result-type name="richtexteditorFileUpload" 
                 class="com.opensymphony.webwork.views.jsp.ui.RichtexteditorFileUploadResult" />

RichtexteditorGetFoldersResult

WebWork's result, creating the appropriate result (in xml form) and write to the response stream corresponding the the Rich Text Editor's 'GetFolders' command.

An example of the response would be as follows:

<?xml version="1.0" encoding="utf-8" ?>
<Connector command="GetFolders" resourceType="File">
  <CurrentFolder path="/Samples/Docs/" url="/UserFiles/File/Samples/Docs/" />
  <Folders>
    <Folder name="Documents" />
    <Folder name="Files" />
    <Folder name="Other Files" />
    <Folder name="Related" />
 </Folders>
</Connector>

RichtexteditorGetFoldersAndFilesResult

WebWork's result, creating the appropriate result (in xml form) and write to the response stream corresponding to the Rich Text Editor's 'GetFoldersAndFiles' command

An example of the response would be as follows:

<?xml version="1.0" encoding="utf-8" ?>
<Connector command="GetFoldersAndFiles" resourceType="File">
  <CurrentFolder path="/Samples/Docs/" url="/UserFiles/File/Samples/Docs/" />
  <Folders>
    <Folder name="Documents" />
    <Folder name="Files" />
    <Folder name="Other Files" />
    <Folder name="Related" />
  </Folders>
  <Files>
    <File name="XML Definition.doc" size="14" />
    <File name="Samples.txt" size="5" />
    <File name="Definition.txt" size="125" />
    <File name="External Resources.drw" size="840" />
    <File name="Todo.txt" size="2" />
  </Files>
</Connector>

RichtexteditorCreateFolderResult

WebWork's result, creating the apropriate result (in xml form) and write it out to the response stream corresponding to a 'CreateFolder' command from the Rich Text Editor.

An example of the response would be as follows:

<?xml version="1.0" encoding="utf-8" ?>
<Connector command="CreateFolder" resourceType="File">
  <CurrentFolder path="/Samples/Docs/" url="/UserFiles/File/Samples/Docs/" />
  <Error number="0" />
</Connector>

RichtexteditorUploadFileResult

WebWork's result, creating the appropriate result (in javascript form) and write to the response stream corresponding to a 'FileUpload' command from the Rich Text Editor.

An example of the response would be as follows:

<script type="text/javascript">
     window.parent.frames['frmUpload'].OnUploadCompleted(0) ;
</script>