JSF - Upload Image in Primefaces CKEditor

         JSF 2.0 is a framework interesting enough to get your attention; combined with a component library like Primefaces it really makes it worth. In addition to the 100+ rich set of JSF components from Primefaces you could also add the PrimeFaces Extensions. Having all these on hand, I noticed that the CKEditor that is integrated in Primefaces Extension doesn't have built-in support for uploading/rendering images.

Let's get rollin' on uploading/rendering an image in CKEditor using:

• Primefaces Extension for CKEditor component
• HttpServlet for CKEditorUploadServlet and for CKEditorGetImageServlet
• JS for CKEditor configuration
• Spring @Service for saving or getting images from db

1. Declare primefaces dependencies in your pom.xml

2. Add the editor.xhtml to your project

3.Include the editor.xhtml to any page - where it's needed


4. Configure the filebrowserImageUploadUrl from CKEditor, so it knows what servlet to use when the upload button is clicked. I saved the file in /resources/js/ as ckeditor.js.

5. Implement and declare CKEditorUploadServlet - this servlet will be responsible for uploading the images to db

5.1 Declare it in web.xml file 5.2 Implementation of CKEditorUploadServlet

6. Implement and declare CKEditorGetImageServlet - this servlet will be responsible for getting the images from db

6.1 Declare it in web.xml file 6.2 Implementation of CKEditorGetImageServlet

7. Here is the proof

Pages: 1 2 3 4