Using ckeditor in jsf page

Question

How do I use a custom CKEditor in a jsf page ? I\'m having lots of trouble trying to implement it. What I did:

• I made a custom CKEditor with the ckEditor builder

Answer 1

I switched to the primeface extension.

Those are the dependencies needed (I forgot the second one that's why it wasn't working):

<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>primefaces-extensions</artifactId>
    <version>3.1.0</version>
</dependency>
<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>resources-ckeditor</artifactId>
    <version>3.1.0</version>
</dependency>

then the namespace in the xhtml file:

xmlns:pe="http://primefaces.org/ui/extensions"

and here is a link that explains step by step.

If you are not using primefaces you can make it work by following the comment of w vd L

Answer 2

I have used it in JSF Richfaces. The standard richfaces comes with CKEditor 3.3, i wanted 4.0 so i installed also a custom CKEditor.

For me the only thing worked was to config the editor on the fly.

What i did:

XHTML: Start page

....
// setting 'root' path of the CKEditor on the landing page (before the actual editor page)
// Maybe you can let this line point to your own custom settings?
window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/ckeditor/';
....

XHTML: editor page

                ....
                <script type="text/javascript">
                /* <![CDATA[ */
                        function destroyEditor(){
                            // removing old instances
                            for(var i in CKEDITOR.instances){
                                 CKEDITOR.instances[i].destroy();
                            }
                        }

                        jQuery(document).ready(function() {
                            CKEDITOR.config.language = 'nl';
                            CKEDITOR.config.defaultLanguage = 'nl';
                            CKEDITOR.config.resize_enabled = false;
                            CKEDITOR.config.height = '469px'
                            ....
                            // lots of settings, to make it according to my own custom wishing. 
                            ....
                            CKEDITOR.config.extraPlugins = 'tekstblokken,nexttext';
                            // The important Line. To set the editor on the page.
                            CKEDITOR.replace( #{rich:element('editorTextArea')});

                            CKEDITOR.on('instanceReady', function(){ 
                                // do some own custom code if needed
                            }); 
                        });
                /*]]>  */
                </script>

....

<h:inputTextarea id="editorTextArea" value="#{cc.attrs.managedBean.editorValueOf(cc.attrs.id)}">
                    </h:inputTextarea>

I hope this gives you some help into the right direction