Struts 2 > richtexteditor |
![]() |
Please make sure you have read the Tag Syntax |
Create a Rich Text Editor based on FCK editor (www.fckeditor.net). |
|
<ww: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 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(); } |
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(); } |
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; |
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.
|
The method that does the functionality when the richtexteditor 'upload' command is '/webwork/richtexteditor/data/' issued. It return a result name of 'fileUpload'. |
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 |
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 |
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 |
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 |
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" /> |
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> |
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> |
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> |
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> |