luni, 8 aprilie 2013

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

Un comentariu: