Struts 2 > richtexteditor |

Struts 2
richtexteditor
Edit Page Browse Space Add Page Add News
Added by tm_jee, last edited by Ted Husted on Sep 02, 2006 (view change) show comment hide comment
Comment:
Update parent page
View page history

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

# Description

Content pulled from external source. Click here to refresh.
Create a Rich Text Editor based on FCK editor (www.fckeditor.net).

# Parameters

Content pulled from external source. Click here to refresh.

#### 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

Content pulled from external source. Click here to refresh.
    <ww:richtexteditor
    		toolbarCanCollapse="false"
    		width="700"
    		label="Description 1"
    		name="description1"
    		value="Some Content I keyed In In The Tag Itself"
    		/>

# Server Side Browsing

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
An abstract class to be extended in order for the Rich text editor to perform server-side browsing and uploading.

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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

Content pulled from external source. Click here to refresh.
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>