Using CKEditor instead of PrimeFaces Editor

6
votes

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.

5
jsfjsf-2ckeditorprimefaces
I reckon this is a good question, and having had this problem myself the replies have helped me find a solution +1 - Oversteer

5 Answers

7
votes

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;
6
votes

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;"/>
2
votes

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" />
1
votes

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.

0
votes

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: