Search code examples
jsfjsf-2ckeditorprimefaces

Using CKEditor instead of PrimeFaces Editor


I am trying to use CKEditor in my JSF application. How to get the content of CKEditor into backing bean..?

index.xhtml

<form action=""  method="post">
            <p>
            My Editor:<br />
                <textarea cols="90" rows="20"  id="editor1" name="editor1" value="#{EditorBean.value}"></textarea>
                <script type="text/javascript">
                        CKEDITOR.replace( 'editor1',
                        {
                            uiColor: '#85B5D9'
                        });
                </script>
                <input type="button" value="Clear" name="clear" onclick="clear1()"/>
            </p>
        </form>

BackingBean

@ManagedBean public class EditorBean {

private String value;

public String getValue() {
    return value;
}

public void setValue(String value) {
    this.value = value;
    System.out.println("Content: "+value);
}

}

When I tried to print the value, It is not printing. Help me on this issue. PrimeFaces Editor is not supporting "Insert Table" function. So, I want to use CKE.


Solution

  • As el wont be able to evaluate non-JSF component.

    Add this to your page :

    <h:inputHidden value="#{EditorBean.value}" id="editorValue"/>
    

    and onblur of editor textarea assign the value to the hidden element using

    document.getElementById(editorValue).value = this.value;