Using CKEditor instead of PrimeFaces Editor

Question

I am trying to use CKEditor in my JSF application. How to get CKEditor contents in support of 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 does not print. Help me in this matter. The PrimeFaces editor does not support the Insert Table feature. So, I want to use CKE.

Answer 1

Because el will not be able to evaluate a non-JSF component.

Add this to your page:

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

textarea editor and onblur assign value to hidden element with

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

Answer 2

Since this question somehow frowned ....

There is another option:

You can use PrimeFaces Extensions , here is the link PrimeFaces Extensions CKEditor

Here is an example from the window

 <p:growl id="growl" showDetail="true" /> <pe:ckEditor id="editor" value="#{editorController.content}" interfaceColor="#33fc14"> <p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/> </pe:ckEditor> <p:commandButton actionListener="#{editorController.changeColor}" update="editor" value="Change color with AJAX" style="margin-top:10px;"/> 

Answer 3

try the following:

 <textarea class="ckeditor" cols="80" id="editor1" rows="10"/> <h:inputHidden value="#{tskCtrl.selected.dsc}" id="editorValue"/> <p:commandButton onclick="document.getElementById('editorValue').value = CKEDITOR.instances.editor1.getData();" action="#{tskCtrl.create()}" value="Post" /> 

Answer 4

The answer from niksvp was helpful and set me in the right direction, but the problem I discovered was that the blur handler never fired. I had to copy the value from the text box to the Hidden input in the onclick commandButton handler:

 <textarea id="textareaValue" .../> <a4j:commandButton execute="editorValue" onclick="document.getElementById('editorValue').value = document.getElementById('textareaValue').value;" 

...

or

 <a4j:commandButton execute="editorValue" onclick="jQuery('#editorValue').val(jQuery('#textareaValue').val())" 

I tried using onbegin and onbeforedomupdate, but they did not work.