Question

I have a CKEditor in my page. Like this

<h:head>
    <title>Facelet Title</title>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

    <script language="JavaScript">

        function comeBack(){
            document.getElementById(editorValue).value = this.value;
        }

    </script>

</h:head>

<h:body >

    <h:form id="ckEditorForm" prependId="false" >

        <textarea id="editor1"
                  name="editor1"
                  onblur="alert(document.getElementById(editorValue).value = this.value);">

        </textarea>

        <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
        </script>

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

        <h:commandButton id="submit"
                         value="Submit"
                         action="welcome.xhtml" />


    </h:form>

</h:body>

@ManagedBean
@ViewScoped
public class EditorBean {

    private String value;

    /** Creates a new instance of EditorBean */
    public EditorBean() {

    } //end of constructor

    public String getValue() {
        return value;
    }

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

    }

} //end of class EditorBean

Now i want that user press the submit button then the editor value is save into my bean. I found this hiddenfield technique suggested by some one on this forum , but it is not working. Am i doing something wrong? How can i achieve what i want?

Thanks

Answer 1

You need to understand that JSF is a HTML code generator and that JavaScript has basically only access to the HTML DOM tree, not the JSF source code.

Open the page in browser, rightclick and choose View Source. Locate the generated HTML of the <h:inputHidden> component. It’ll look something like this:

<input type="hidden" id="ckEditorForm:editorValue" name="ckEditorForm:editorValue" value="" />

Please note the id attribute value. You have to use exactly this value in your JavaScript document.getElementById():

document.getElementById("ckEditorForm:editorValue");

By the way, much easier is to just use <h:inputTextarea> instead:

<h:inputTextarea id="editor1" value="#{editorBean.value}" />
<script>CKEDITOR.replace("ckEditorForm:editor1");</script>