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>