RichFaces rich：editor组件用法

本文概述

• 样式类和皮肤参数
• 例子

RichFaces提供了<rich：editor>组件, 该组件用于在HTML页面中创建WYSIWYG编辑器。

<rich：editor>组件基于CKEditor实现。呈现<rich：editor>时, 一旦页面完全加载, 就会在页面上呈现文本区域。

注意：<rich：editor>要求<h：body>组件出现在视图中, 并且必须是编辑器的祖先, 才能正确呈现资源依赖关系。

样式类和皮肤参数

下表包含编辑器的样式类和相应的外观参数。

例子

在下面的示例中, 我们正在实现<rich：editor>组件。本示例包含以下文件。

JSF文件

// editor.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>RichFaces Editor Example</title>
</h:head>
<h:body>
<h:form id="form">
<rich:editor id="editor" toolbar="full" value="#{editor.textArea}" style="margin-bottom: 1em">
<a4j:ajax event="change" render="panel" status="panelUpdateStatus" />
<a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">
<a4j:attachQueue requestDelay="4000" />
</a4j:ajax>
</rich:editor>
<rich:panel id="panel">
<f:facet name="header">
Output from Editor
<a4j:status name="panelUpdateStatus">
<f:facet name="start">
(Updating)
</f:facet>
</a4j:status>
</f:facet>
<h:outputText escape="false" value="#{editor.textArea}" />
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

托管豆

// Editor.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Editor {
String textArea;
public String getTextArea() {
return textArea;
}
public void setTextArea(String textArea) {
this.textArea = textArea;
}
}

输出