Render a rich text editor element
Create a Rich Text Editor based on FCK editor (www.fckeditor.net).
<a:richtexteditor toolbarCanCollapse="false" width="700" label="Description 1" name="description1" value="Some Content I keyed In In The Tag Itself" />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 Struts Action Framework, one need to defined the following action definition typically in xwork.xml
<package name="richtexteditor-browse" extends="struts-default" namespace="/struts/richtexteditor/editor/filemanager/browser/default/connectors/jsp"> <action name="connector" class="org.apache.struts2.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 '/struts/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 '/struts/richtexteditor/editor/filemanager/browser/default/connectors/jsp/connector.action' which will caused the Struts Action Framework'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
/struts/static/richtexteditor/editor/filemanager/browser/default/browser.html? &Type=Image&Connector=connectors/jsp/connector.actioncould be changed to
/struts/static/richtexteditor/editor/filemanager/browser/default/browser.html? &Type=Image&Connector=myLittlePath/myConnector.actionIn this case the action will need to have a namespace of '/struts/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(); }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 Struts Action Framework, one need to defined the following action definition typically in xwork.xml
<package name="richtexteditor-upload" extends="struts-default" namespace="/struts/richtexteditor/editor/filemanager/upload"> <action name="uploader" class="org.apache.struts2.components.DefaultRichtexteditorConnector" method="upload"> <result name="richtexteditorFileUpload" /> </action> </package>By default whenever an upload command is triggered, a '/struts/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 Struts Action Framework 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
/struts/static/richtexteditor/editor/filemanager/upload/uploader.action?Type=Imagecould be changed to
/struts/static/richtexteditor/editor/filemanager/upload/aDifferentUploader.action?Type=ImageIn this case the action will need to have a namespace of '/struts/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(); }The Struts Action Framework 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;
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 | /struts/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 ). 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 | /struts/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 | /struts/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 '&' 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 | /struts/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 | /struts/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 | /struts/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 | /struts/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 | /struts/static/richtexteditor/plugins/ | string | Sets the base path used when looking for registered plugins. |
skinPath | false | /struts/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 | /struts/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 ( ) 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 | |
items | false | Object/String | List of items to be included in the toolbar | |
smileyPath | false | /struts/static/ richtexteditor/editor/ images/smiley/msn/ | string | path where smilies are located |
templateDir | false | Object/String | The template directory. | |
theme | false | Object/String | The theme (other than default) to use for rendering the element | |
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 | 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 element | |
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 |