JSF 2.x - CKEditor integration guide

This guide explains how to install and integrate the CKEditor javascript component in a JSF 2.x project.

CKEditor Installation

Download CKEditor and add it to your project.

ckeditor in a jsf2 project

To configure CKEditor or add plugins you need to edit the config.js file. To integrate aditional plugins add them to the plugins folder.

JSF 2.x Integration

Before we begin, we need to include the ckeditor.js file inside of the html header.

  <script type="text/javascript" src="/ckeditor/ckeditor.js" /> 

Now we initialize a <textarea> with a CKEditor instance using the CKEDITOR.replace() function.
To edit an existing text we map the #{editorBean.text} property directly with the textarea. Alternatively we could use the
javascript command


to display the text in the CKEditor.

The save button has a small javascript that copies the edited text from the CKEditor to a hidden field that is mapped with  #{editorBean.text}. After the onlick event the fom with our hidden field is submitted back to the server.

  <script type="text/javascript" src="/ckeditor/ckeditor.js" /> 
<h:form id="ckEditorForm">
    <h:inputHidden required="false" value="#{editorBean.text}" id="editorValue" />
    <textarea cols="140" rows="40" id="editor1" name="editor1">
        <h:outputText value="#{editorBean.text}"/>
    <script type="text/javascript">
                uiColor: '#ECE8DA'

    <h:commandButton id="saveButton" value="Save" 
                     onclick="document.getElementById('addNoteForm:editorValue').value =