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
• Downloaded and placed it in my webcontent folder.

test.xhtml page:

<script src="/ckeditor/ckeditor.js"></script>
     <form>
        <textarea name="editor1" id="editor1" rows="10" cols="80"/>

        <script>

        CKEDITOR.replace( 'editor1');
        </script>
    </form>

Not working, just had a standard textarea. So I changed the src to:

<script src="ckeditor/ckeditor.js"></script>

It's was working but it wasn't my custom CKEditor build it was the vanilla one.

So I used the h:OutputScript tag. (I had 2 ckEditor folders in the same project to facilitate access while testing):

<h:outputScript library="script/ckeditor" name="ckeditor.js"></h:outputScript>

The textarea just disappears. My textarea just disappears. It finds the script because if I put a wrong script name my textarea is back up.

So I deleted the CKeditor folders... And there the magic happenned: It was still working when using this :

<script src="ckeditor/ckeditor.js"></script>

I had zero ckeditor.js file in my project and yet the script was working.

Then I tried the primefaces extension with this in pom.xml:

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

and this in xhtml:

<pe:ckEditor id="editor" value="" checkDirtyInterval="0">  
</pe:ckEditor>  

But the result was the standard html textarea box again. How can I use it ?

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