个性化阅读
专注于IT技术分析

RichFaces rich:editor组件用法

本文概述

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文件

// 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;
}
}

输出

RichFaces rich:editor组件用法1
RichFaces rich:editor组件用法2

赞(0) 打赏
未经允许不得转载:srcmini » RichFaces rich:editor组件用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏