Rich Editor

Here’s a quick tutorial on how to use the new Editor in RichFaces…

First of all, download the newest version of RichFaces.. here

Add the jars to your project…

jars: richfaces-api-3.3.2.SR1, richfaces-impl-3.3.2.SR1, richfaces-ui-3.3.2.SR1.. there are some extra jars you might need… they’re all listed in the download area of rich faces…

Now… let’s configure our web.xml..

Add the next lines:

<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>glassX</param-value>
</context-param>
<!-- Defining and mapping the RichFaces filter -->
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

If you’re using facelets.. you should also add these lines to your faces-config.xml

<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

These lines tells to the JSF engine that we’ll use the Facelets View Handler to render our pages..
Now.. in our page.. let’s add the tags we need to use RichFaces Editor.. on the top our page:

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"

Now, let’s add our control..

<rich:editor width="800" height="400" value="#{Bean.content}" theme="advanced" plugins="safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template" viewMode="visual" >
<f:param name="theme_advanced_buttons1" value="save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect" />
<f:param name="theme_advanced_buttons2" value="cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code" />
<f:param name="theme_advanced_buttons3" value="insertdate,inserttime,preview,|,forecolor,backcolor,tablecontrols,|,hr,removeformat,visualaid,|"/>
<f:param name="theme_advanced_buttons4" value="sub,sup,|,charmap,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen,|, insertlayer,moveforward,movebackwaard,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage" />
<f:param name="theme_advanced_statusbar_location" value="none"/>
<f:param name="theme_advanced_toolbar_align" value="left"/>
<f:param name="theme_advanced_toolbar_location" value="top"/>
<f:param name="verify_html" value="true"/>
</rich:editor>

This will give us an output like this one:

rich-faces-editor

I will explain later how to use templates with this editor…
Hope this will be usefull…
Later…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s