Sử dụng FCK trong JSP

Ở đây mình trình bày cách sử dụng trên Netbean IDE.

(Các mục đánh dấu * chỉ cần dùng nếu bạn cần chức năng browse, upload file)

Tài nguyên cần thiết:

• Thư viện fckeditor (2.6)

Các thư viện cho java:

Thư viện cơ bản để chạy fck

• fckeditor-java-core-2.6.jar
• slf4j-simple-1.5.8.jar
• slf4j-simple-1.5.8.jar 
• commons-collections-3.2.1.jar
• commons-io-1.3.2.jar

Nếu cần sử dụng chức năng upload file, hình ảnh thì ta cần thêm các thư viện sau (*):

• 
  
• commons-fileupload-1.2.1.jar
• 
  
• imageinfo-1.9.jar

Các bước tiến hành:

• Download, giải nén, copy thư mục fckeditor vào thư mục gốc của web site (trong Netbeans là Web Pages)
• 
  
• Thiết đặt các thông tin trong file cấu hình (web.xml)
• 
  
• Cấu hình cho một số chức năng của fckeditor (fckeditor.properties) (chỉ cần dùng nếu muốn chọn, upload hình ảnh trên server) (*)
• 
  
• Tạo file JSP, khai báo tablib và sử dụng

Chi tiết:

1.Down load, giải nén, copy thư mục fckeditor vào thư mục gốc của web site

Bạn có thể download thư viện fckeditor và các thư viện java cần thiết cho nó ở đây

2.Cấu hình file web.xml

Nếu trong project của bạn chưa có file này, click phải vào thư mục WEB-INF > New > Other … Xuất hiện hộp thoại, chọn mục Web > Web Standard Descriptor (web.xml)

Trong file web.xml, ta câu hình như sau:

<servlet>

<servlet-name>ConnectorServlet</servlet-name>

<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>ConnectorServlet</servlet-name>

<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>

       </servlet-mapping>

Lưu ý:

• servlet-name do chúng ta tùy chọn (chú ý đặt trùng nhau ở servlet và servlet-mapping)

Ta cần phải điền đúng 2 thông tin:

• servlet-class ở thẻ servlet
• url-pattern thuộc thẻ servlet-mapping

Để các có thể nhớ một cách đơn giản các thông tin cấu hình trên, bạn xem hình bên dưới.

Lấy giá trị cho class-name

lấy url-pattern

3.Cấu hình cho fckeditor (*)

Trong thư mục WEB-INF, thêm mới một thư mục và đặt tên là classes. Tạo file fckeditor.properties và đặt trong thư mục vừa tạo. Ở đây mình chỉ khai báo một thông tin cần thiết cho việc duyệt, upload file trên server. Bạn khai báo như sau:

connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction

Để lấy nội dung vế bên phải, bạn có thể xem hình bên dưới:

4.Khai báo, sử dụng:

Trong trang JSP bạn khai báo trong thẻ taglib

<%@taglib prefix= “fck” uri = “http://java.fckeditor.net” %>

Bây giờ ta có thể sử dụng bằng cách dùng thẻ, ví dụ:

• instanceName: tên của editor
• inputName: tên của ô nhập văn bản, đây sẽ là giá trị bạn sẽ dùng để lấy nội dung bằng phương thức getParameter() của đối tượng request.
• toolbarSet: kiểu thanh công cụ. Có 2 giá trị có sẵn

• Default: đây là giá trị mặc định, hiển thị tất cả chức năng của editor
• Basic: chỉ hiển một số chức năng đơn giản

Một số hình ảnh:

các thư viện cơ bản

tạo file fckeditor.properties

cấu hình để duyệt và upload hình ảnh, file trên server

thêm file web.xml