描述
生成一个基于FCK编辑器(http://www.fckeditor.net
)的富文本编辑器.
属性
| 名称 |
必填 |
缺省值 |
类型 |
描述 |
| checkBrowser |
false |
true |
Boolean |
编辑器在绘制工具条时是否检查浏览器的兼容性 |
| displayError |
false |
true |
Boolean |
当绘制编辑器失败时是否显示错误信息. |
| autoDetectLanguage |
false |
true |
Boolean |
通知编辑器自动检测用户的语言设置并调整界面语言. 使用Internet Explorer时, 使用Windows控制面板中定义的语言. 使用Firefox时, 使用浏览器自己的语言. |
| baseHref |
false |
|
String |
处理链接(包括images, links, styles等元素中的链接)时使用的Base URL. 例如, 如果BaseHref设置为'http://www.fredck.com', 那么一个指向"/images/Logo.gif"的图片地址将被编辑器解释为"http://www.fredck.com/images/Logo.gif", 而不需要修改image元素的"src"属性. |
| basePath |
false |
/webwork/static/richtexteditor/ |
String |
设置服务器上包含FCK编辑器文件的目录 |
| contentLangDirection |
false |
ltr |
String |
设置编辑区内容的排列方向, 从左到右(ltr)或从右到左(rtl) |
| customConfigurationsPath |
false |
|
String |
设置一个定制的配置文件路径, 可以覆盖某些缺省配置. 推荐使用绝对路径(以"/"开始), 如"/myfckconfig.js". |
| debug |
false |
false |
Boolean |
调用FCKDebug.Output()函数时显示调试窗口. |
| defaultLanguage |
false |
en |
String |
设置编辑器界面上使用的缺省语言. 当AutoDetectLanguage选项关闭或用户语言不可用时使用该属性. |
| enableSourceXHTML |
false |
true |
String |
通知编辑器从所见即所得视图切换成源代码视图时将HTML代码处理成XHTML. |
| enableXHTML |
false |
true |
String |
通知编辑器在提交表单时将HTML代码处理成XHTML. |
| fillEmptyBlocks |
false |
true |
String |
强制在块元素(Block elements, 如P, DIV, H1, PRE等)中加入一个 . 在浏览时, 空的块元素将被"收起(collapsed)", 因此一个空的<p></p>不会显示出来. 在编辑时, 编辑器将"展开(expend)"空的块元素, 这样就可以在其中插入内容了. 该选项设置为"true"可以在编辑和浏览时得到一致的输出结果. |
| flashBrowserURL |
false |
/webwork/static/richtexteditor/ editor/filemanager/browser/ default/browser.html? Type=Flash&Connector= connectors/jsp/connector.action |
String |
用户在"Flash"对话框中点击'Browse Server'按钮时调用的页面. 使用这种办法, 可以创建自己定制的Flash浏览器以便更好的与系统集成在一起. |
| flashUploadURL |
false |
/webwork/static/richtexteditor/ editor/filemanager/upload/ uploader.action?Type=Flash |
string |
用户在"Flash"对话框中点'Send it to server'按钮时调用的文件上传处理器的URL. 使用这种办法, 可以创建自己定制的Flash上传处理器以便更好的与系统集成在一起. |
| 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 |
必须显示在颜色面板(在工具条上)的颜色. |
| fontFormats |
false |
p; div; pre; address; h1; h2; h3; h4; h5; h6 |
string |
工具条上的"Format"命令显示的元素列表. |
| fontNames |
false |
Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana |
string |
工具条上的"Fonts"命令显示的字体列表. |
| fontSizes |
false |
1/xx-small; 2/x-small; 3/small; 4/medium; 5/large; 6/x-large; 7/xx-large |
string |
工具条上的"Size"命令显示的字体大小列表. |
| forcePasteAsPlainText |
false |
false |
boolean |
再粘贴(paste)操作时将剪贴板的内容强制转换成纯文本. |
| forceSimpleAmpersand |
false |
false |
boolean |
在标签属性值中强制使用'&'符号(不转换成'&'), 这种转换是W3C XHTML的要求, 因此建议将该选项设置为'false'. |
| formatIndentator |
false |
' ' |
boolean |
设置格式化HTML代码时使用的缩进字符. 可以是一系列空格(' ')或一个制表符('\t'). |
| formatOutput |
false |
true |
boolean |
处理并格式化编辑器生成的HTML代码. |
| formatSource |
false |
true |
boolean |
当从所见即所得视图切换到源代码视图时, 编辑器显示的HTML代码被处理并格式化. |
| fullPage |
false |
false |
boolean |
开启整页编辑功能(从<HTML>起始标签到</HTML>结束). 这也将开启工具条上的'Page Properties'按钮. |
| geckoUseSPAN |
false |
true |
boolean |
通知Gecko浏览器使用SPAN标签来显示粗体, 斜体和下划线而不使用标签<B>, <I>和<U>. |
| height |
false |
200 |
string |
设置编辑器的高度 |
| imageBrowserURL |
false |
/webwork/static/richtexteditor/ editor/filemanager/browser/default/ browser.html?Type=Image&Connector= connectors/jsp/connector.action |
string |
用户在'Image'对话框中点击'Browse Server'按钮时调用的页面URL. 使用这种办法, 可以创建自己定制的图片浏览器以便更好的与系统集成在一起. |
| imageUploadURL |
false |
/webwork/static/richtexteditor/ editor/filemanager/upload/ uploader.action?Type=Image |
string |
用户在'Image'对话框中点击'Send it to server'按钮时调用的图片上传处理器. 使用这种办法, 可以创建自己定制的图片上传处理器以便更好的与系统集成在一起. |
| linkBrowserURL |
false |
/webwork/static/richtexteditor/ editor/filemanager/ browser/ default/browser.html? Type=File& Connector= connectors/jsp/connector.action |
string |
用户在'Link'对话框中点击'Browse Server'按钮时调用的页面. 使用这种办法, 可以创建自己定制的文件浏览器以便更好的与系统集成在一起. |
| linkUploadURL |
false |
*/webwork/static/ richtexteditor/ editor/filemanager/ upload/uploader.action? Type=File * |
string |
用户在'Link'对话框中点击'Send it to server'按钮时调用的链接上传处理器. 使用这种办法, 可以创建自己定制的链接上传处理器以便更好的与系统集成在一起. |
| pluginsPath |
false |
/webwork/static/richtexteditor/ plugins/ |
string |
设置插件目录, 编辑器将在该目录下查找注册的插件. |
| skinPath |
false |
/webwork/static/richtexteditor/ skins/default |
string |
设置编辑器使用的皮肤(图形界面的设置). |
| startupFocus |
false |
false |
boolean |
强制编辑器在启动时(page load事件)获取键盘输入焦点 |
| stylesXmlPath |
false |
/webwork/static/richtexteditor/ fckstyles.xml |
string |
设置工具条上'Style'命令使用的定义风格规则的XML文件路径. |
| tabSpaces |
false |
0 |
string |
设置当用户输入'tab'键时插入的空格( )个数. 这是Internet Explorer特有功能. 其他浏览器自动插入空格. |
| toolbarCanCollapse |
false |
true |
boolean |
当用户点击工具条左边(contentLangDirection为'rtl'时在右边)的竖条时, 编辑器可以收起/展开工具条(on the right for 'rtl' languages). |
| toolbarSet |
false |
Default |
string |
设置工具条的显示名称 |
| toolbarStartExpanded |
false |
true |
boolean |
编辑器加载后, 工具条是否是展开的. |
| useBROnCarriageReturn |
false |
true |
boolean |
输入回车时是否使用<br/>替换. |
| width |
false |
100% |
string |
设置编辑器的宽度 |
| allowFlashBrowse |
false |
true |
boolean |
是否允许flash浏览 |
| allowFlashUpload |
false |
true |
boolean |
是否允许flash上传 |
| allowImageBrowse |
false |
true |
boolean |
是否允许图片浏览 |
| allowImageUpload |
false |
true |
boolean |
是否允许图片上传 |
| allowLinkBrowse |
false |
true |
boolean |
是否允许链接浏览 |
| allowLinkUpload |
false |
true |
boolean |
是否允许链接上传 |
| flashUploadAllowedExtension |
false |
.(swf|fla)$ |
string |
允许上传的Flash文件名的正则表达式 |
| flashUploadDeniedExtension |
false |
|
string |
禁止上传的Flash文件名的正则表达式 |
| imageUploadAllowedExtension |
false |
.(jpg|gif|jpeg|png)$ |
string |
允许上传的图片文件名的正则表达式 |
| imageUploadDeniedExtension |
false |
|
string |
禁止上传的图片文件名的正则表达式 |
| linkUploadAllowedExtension |
false |
|
string |
允许上传的链接名称的正则表达式 |
| linkUploadDeniedExtension |
false |
.(php| php3| php5| phtml| asp| aspx| ascx| jsp| cfm| cfc| pl| bat| exe| dll| reg| cgi)$ |
string |
禁止上传的链接名称的正则表达式 |
| smileyImages |
false |
|
Object/String |
包含笑脸图片JavaScript数组的文件. |
| smileyPath |
false |
/webwork/static/richtexteditor/ editor/ images/smiley/msn/ |
string |
笑脸文件所在路径 |
| theme |
false |
|
Object/String |
输出元素时使用的主题(theme)(不使用缺省的) |
| template |
false |
|
Object/String |
输出元素时使用的模板(template)(不使用缺省的) |
| cssClass |
false |
|
Object/String |
输出元素时的class属性 |
| cssStyle |
false |
|
Object/String |
输出元素时的css样式定义(译者注:就是html元素的style属性) |
| title |
false |
|
Object/String |
在输出元素时设置html属性title |
| disabled |
false |
|
Object/String |
在输出元素时设置html属性disabled |
| label |
false |
|
Object/String |
用于输出一个元素对应的label的表达式 |
| labelPosition |
false |
left |
Object/String |
不赞成使用. |
| labelposition |
false |
|
Object/String |
定义元素标签的位置(top/left) |
| requiredposition |
false |
|
Object/String |
定义required属性输出的位置(left|right) |
| name |
false |
|
Object/String |
元素的名字 |
| required |
false |
false |
Boolean |
如果设置为true, 在输出标签时将显示出此字段是必须输入的(译者注:如果使用默认模板,将会标示为"*") |
| tabindex |
false |
|
Object/String |
在输出元素时设置html属性tabindex |
| value |
false |
|
Object/String |
预设input元素的value属性. |
| onclick |
false |
|
Object/String |
在输出元素时设置html属性onclick |
| ondblclick |
false |
|
Object/String |
在输出元素时设置html属性ondblclick |
| onmousedown |
false |
|
Object/String |
在输出元素时设置html属性onmousedown |
| onmouseup |
false |
|
Object/String |
在输出元素时设置html属性onmouseup |
| onmouseover |
false |
|
Object/String |
在输出元素时设置html属性onmouseover |
| onmousemove |
false |
|
Object/String |
在输出元素时设置html属性onmousemove |
| onmouseout |
false |
|
Object/String |
在输出元素时设置html属性onmouseout |
| onfocus |
false |
|
Object/String |
在输出元素时设置html属性onfocus |
| onblur |
false |
|
Object/String |
在输出元素时设置html属性onblur |
| onkeypress |
false |
|
Object/String |
在输出元素时设置html属性onkeypress |
| onkeydown |
false |
|
Object/String |
在输出元素时设置html属性onkeydown |
| onkeyup |
false |
|
Object/String |
在输出元素时设置html属性onkeyup |
| onselect |
false |
|
Object/String |
在输出元素时设置html属性onselect |
| onchange |
false |
|
Object/String |
在输出元素时设置html属性onchange |
| tooltip |
false |
|
String |
设置元素的tooltip属性(译者注:tooltip为工具栏提示) |
| tooltipConfig |
false |
|
String |
设置tooltip属性的配置 |
| id |
false |
|
Object/String |
id是定位元素时使用的. 对于UI和表单标签它会被用作HTML的id属性 |
例子
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"
/>
|
浏览服务器端内容
有时需要允许一个富文本编辑器浏览服务器端的内容, 例如: 当用户点击图片按钮后, 又在对话框中点击了'Browser'按钮. 为了将该功能与WebWork集成在一起, 需要定义如下所示的action(通常定义在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>
缺省情况下, 当触发了一个"浏览"命令(例如, 点击'image' button然后在对话框中点击'browse server'按钮, 将触发URL '/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?&Type=Image&Connector=connectors/jsp/connector.action'), FCK编辑器附带的页面browser.html将触发'/webwork/richtexteditor/editor/filemanager/browser/default/connectors/jsp/connector.action', 这将执行webwork的*DefaultRichtexteditorConnector*. 通过修改'imageBrowseURL'属性可以改变触发的URL. 一共有三个类似的URL, 分别是'imageBrowseURL', 'linkBrowseURL'和'flashBrowseURL'. 推荐使用缺省的URL. 也可以修改Connector的参数. 例如:
/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?
&Type=Image&Connector=connectors/jsp/connector.action
可以修改为:
/webwork/static/richtexteditor/editor/filemanager/browser/default/browser.html?
&Type=Image&Connector=myLittlePath/myConnector.action
本例中的action应当使用名空间'/webwork/richtexteditor/editor/filemanager/browser/default/myLittlePath', 名称应为'myConnector'.
缺省情况下action的方法应该定义在xwork.xml并命名为'browse'. 如果有变化如, myBrowse, 需要使用下列代码:
public String myBrowse() {
browse();
}
(摘自snippet:id=serversidebrowsing|javadoc=true|url=com.opensymphony.webwork.components.RichTextEditor)
上传文件(Server Side Uploading)
有时同样需要允许一个富文本编辑器向服务器上传文件. 例如, 当用户点击图片按钮后, 又在对话框中点击了'Upload'按钮并从客户端机器上选中了一个文件, 然后点击'Send it to the server'. 为了将该功能与WebWork集成在一起, 需要定义如下所示的action(通常定义在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>
缺省情况下, 当触发了一个"上传"命令时, 将触发URL '/webwork/static/richtexteditor/editor/filemanager/upload/uploader.action?Type=Image'. 通过修改'imageUploadURL'属性可以改变触发的URL. 当链接触发后, 将执行WebWork的action. 一共有三个这样的URL, 名为'imageUploadURL', 'linkUploadURL' and 'flashUploadURL'. 推荐使用缺省的URL. 当然可以修改URL, 但必须包含Type参数. 例如:
/webwork/static/richtexteditor/editor/filemanager/upload/uploader.action?Type=Image
可以修改为:
/webwork/static/richtexteditor/editor/filemanager/upload/aDifferentUploader.action?Type=Image
本例中的action应当使用名空间'/webwork/static/richtexteditor/editor/filemanager/upload' , 名称应为'aDifferentUploader'.
缺省情况下action的方法应该定义在xwork.xml并命名为'upload'. 如果有变化如, myUpload, 需要使用下列代码:
public String myUpload() {
upload();
}
(摘自snippet:id=serversideuploading|javadoc=true|url=com.opensymphony.webwork.components.RichTextEditor)
WebWork Action
AbstractRichtexteditorConnector
富文本编辑器用来执行服务器侧浏览和上传的抽象基类.
处理服务器侧浏览和上传的action需要从AbstractRichtexteditorConnector继承.
着需要实现4个抽象方法:
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方法
本方法执行richtexteditor的'browse'命令指定的功能.
下表列出了实际的'browse'返回的结果名称.
| Browse |
Command Result Name |
| GetFolders |
getFolders |
| GetFoldersAndFiles |
getFoldersAndFiles |
| CreateFolder |
createFolder |
| FileUpload |
fileUpload |
upload方法
本方法执行richtexteditor的'upload'命令指定的功能.
返回结果为'fileUpload'.
getFolders方法
当richtexteditor指定了'GetFolders'命令时将调用该方法. 该方法应当搜索服务器端并返回一个Folder[]数组.
要查询的文件夹路径由folderPath指定. 类型参数应该是下列三者之一: 'Image', 'Link'和'Flash'.
getFoldersAndFiles方法
当richtexteditor指定了'GetFoldersAndFiles'命令时将调用该方法. 该方法应当在virtualFolderPath指定的文件夹下搜索文件和文件夹并返回FoldersAndFiles对象.
要查询的文件夹路径由virtualFolderPath指定. 类型参数应该是下列三者之一: 'Image', 'Link'和'Flash'.
createFolder方法
当richtexteditor指定了'CreateFolder'命令时将调用该方法. 如果允许在服务器上创建文件夹, 该方法将创建一个新文件夹, 并使用一个CreateFolderResult对象将结果返回. CreateFolderResult类包括一个静态方法用于返回结果.
要查询的文件夹路径由virtualFolderPath指定. 类型参数应该是下列三者之一: 'Image', 'Link'和'Flash'.
.创建的新文件夹名称由newFolderName指定.
fileUpload方法
当richtexteditor指定了'FileUpload'命令时将调用该方法. 该方法将处理文件上传并返回FileUploadResult对象. FileUploadResult仅包含一个用于创建结果的静态方法.
要查询的文件夹路径由virtualFolderPath指定. 类型参数应该是下列三者之一: 'Image', 'Link'和'Flash'. 上传文件名称由filename指定, 文件的类型(content type)由conetnType指定, 文件的内容可以从newFile对象中读出.
结果类型
AbstractRichtexteditorResult
RichTextEditor所有结果的抽象基类. 它包括一些可以子类中使用的通用方法.
应该在xwork.xml(缺省就已经包含了)中加入如下的结果类型配置:
<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定义的结果, 创建符合要求的结果(使用XML格式)并写回到'GetFolder'命令对应的响应输出流中.
下面是一个响应结果的示例:
<?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定义的结果, 创建符合要求的结果(使用XML格式)并写回到'GetFoldersAndFiles'命令对应的响应输出流中.
下面是一个响应结果的示例:
<?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定义的结果, 创建符合要求的结果(使用XML格式)并写回到'CreateFolder'命令对应的响应输出流中.
下面是一个响应结果的示例:
<?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定义的结果, 创建符合要求的结果(使用JavaScript的格式)并写回到'FileUpload'命令对应的响应输出流中.
下面是一个响应结果的示例:
<script type="text/javascript">
window.parent.frames['frmUpload'].OnUploadCompleted(0) ;
</script>
