Using CKEditor instead of PrimeFaces Editor

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.

I reckon this is a good question, and having had this problem myself the replies have helped me find a solution +1 — Oversteer, Apr 19 '12 at 13:18

score 7 · Accepted Answer · answered May 13 '11 at 08:07

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;

Daniel · Answer 2 · 2012-04-05T19:30:02.953

6

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

edited Apr 05 '12 at 19:30

answered Apr 05 '12 at 19:22

Daniel

36,833
10
119
200

Can CKFinder be attached to the CKEditor provided by Primefaces Extension? – Tiny Jul 20 '13 at 12:58
according to the http://cksource.com/ckfinder/demo#ckeditor it sounds possible, something like "drop the sources of the finder and include it in your page"... but I haven't tried it myself... – Daniel Jul 20 '13 at 18:17

score 2 · Answer 3 · answered May 03 '13 at 10:48

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

Oversteer · Answer 4 · 2012-04-19T17:44:23.980

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.

score 0 · Answer 5 · answered Mar 02 '19 at 04:31

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.

Using CKEditor instead of PrimeFaces Editor

index.xhtml

BackingBean

5 Answers5

Linked