Using CKEditor instead of PrimeFaces Editor - jsf

Question

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.

Answer 1

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;

Answer 2

Since this question bumped up somehow....
There is another option:
You can use the PrimeFaces Extensions , here is the link PrimeFaces Extensions CKEditor
Here an example from the showcase
<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 this:
<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 found was that the blur handler never fires. I had to copy
the value from the textarea to the inputHidden on the onclick handler of
the commandButton:
<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 & onbeforedomupdate but they didn't work.

Answer 5

Another option is to use the JSF versions of form and textarea. (It is likely possible to do this with passthrough elements as well, but I didn't try that.)
<h:form id="form">
<p>
My Editor:<br />
<h:inputTextarea cols="90" rows="20" id="editor1" value="#{EditorBean.value}" />
<script type="text/javascript">
ClassicEditor.create(document.querySelector('form\\:editor1'))
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</p>
</form>
This assumes that you do not have prependId=false.
The weird \\: is an escaping issue. It won't work without that. You'd get the "is an invalid selector" error in the console.
You can ID form and editor1 with other names, but you'll need to change the selector as well. You don't want to leave it to the defaults, as those are fragile, often changing as you update the page. Now it will only change if you change the structure of where editor1 is relative to form. E.g. if you add a fieldset around editor1, that would make the ID something like form\\:fieldset\\:editor1, where fieldset is the ID of the fieldset as specified in JSF. JSF will create the long version for you.
This also requires the CKEditor script to be added to the head, e.g.:
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
This particular example is for the ClassicEditor version. If you want a different version, you'd need to change the script and the part that says ClassicEditor.
Differences between the script as called in the question and this version may be that this is the current version (as I write this) while the question is older.
Alternately, you might prefer to use h:outputScript. But then you might need to host the script in your resources folder rather than using the version from the CDN.
See also:
Is the ID generated by JSF guaranteed to be the same across different versions and implementations?
Select element with double dot in id, error: “#octo:cat” is not a valid selector
Acquire full prefix for a component clientId inside naming containers with JSF 2.0
How to find out client ID of component for ajax update/render? Cannot find component with expression “foo” referenced from “bar”
How to include JavaScript files by h:outputScript?