RichFaces rich（editor组件用法） rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

RichFaces提供了< rich：editor> 组件, 该组件用于在HTML页面中创建WYSIWYG编辑器。
< rich：editor> 组件基于CKEditor实现。呈现< rich：editor> 时, 一旦页面完全加载, 就会在页面上呈现文本区域。
注意：< rich：editor> 要求< h：body> 组件出现在视图中, 并且必须是编辑器的祖先, 才能正确呈现资源依赖关系。样式类和皮肤参数下表包含编辑器的样式类和相应的外观参数。

Class	Skin Parameters	映射的CSS属性
.cke_skin_richfaces	panelBorderColor	border-color
.cke_skin_richfaces .cke_wrapper	editorMainBackgroundColor	background-color
.cke_skin_richfaces .cke_dialog_body	panelBorderColor一般背景颜色	边框色背景
.cke_skin_richfaces .cke_dialog_title	headerBackgroundColor headerWeightFont	repeat-x字体粗细
.cke_skin_richfaces .cke_path a, .cke_skin_richfaces .cke_path .cke_empty	editorMainTextColor	color
.cke_skin_richfaces .cke_button a.cke_on	AdditionalBackgroundColor panelBorderColor	背景色边框色
.cke_skin_richfaces .cke_button a：悬停, .cke_skin_richfaces .cke_button a：focus, .cke_skin_richfaces .cke_button a：active	tabBackgroundColor	background-color

例子在下面的示例中, 我们正在实现< rich：editor> 组件。本示例包含以下文件。
JSF文件
【RichFaces rich（editor组件用法）】// 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="http://www.srcmini.com/#{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="http://www.srcmini.com/#{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@RequestScopedpublic class Editor {String textArea; public String getTextArea() {return textArea; }public void setTextArea(String textArea) {this.textArea = textArea; }}

输出