Nhúng FCK Editor vào ứng dụng ASP.NET

Bài viết này sẽ hướng dẫn bạn cách nhúng trình biên tập nội dung vào trong một trang web với bộ công cụ FCK Editor. Giới thiệu FCK Editor là công cụ soạn thảo văn bản mã nguồn mở (giống như Microsoft Word ) mà có thể tích hợp vào ứng dụng web như ( ASP...

Bài viết này sẽ hướng dẫn bạn cách nhúng trình biên tập nội dung vào trong một trang web với bộ công cụ FCK Editor.

Giới thiệu

FCK Editor là công cụ soạn thảo văn bản mã nguồn mở (giống như Microsoft Word) mà có thể tích hợp vào ứng dụng web như (ASP/ASP.NET, PHP, ColdFusion, Java, Python...)
FCK là từ viết tắt của Frederico Caldeira Knabben, nó hổ trợ hầu hết các trình duyệt bao gồm: Internet Explorer 5.5+(Window), Firefox 1.0+, Safari 3.0+, Opera 9.5+, Mozilla1.3+ và Netscape.

Cách dùng

FCK Editor phát hành bao gồm một gói javascript và một thành phần (component) dành cho .NET, để có thể nhúng (embed) FCK vào một ứng dụng web asp.net, chúng ta cần phải tải đủ hai gói này tại
http://www.fckeditor.net/download. Phiên bản hiện tại của FCK Editor là : FCKeditor v2.6.3.Và component dành cho asp.net có thể tải tạihttp://sourceforge.net/project/showf...kage_id=137125
Ở đây chúng ta sẽ sử dụng FCK phiên bản mới nhất và hổ trợ 2 ngôn ngữ VB.NET và C#.

Bước 1:

Tạo 1 solution bằng Visual Studio 2008 tên FCK.Editor , sau đó thêm một website mới ngôn ngữ mà bạn đang sử dụng.

Bước 2:

Giải nén mã nguồn FCK Editor và thêm component FCK Editor vào Toolbox.Bước 3: Giải nén mã nguồn FCK Editor chúng ta có một thư mục đặt tên là fckeditor và một .NET component FredCK.FCKeditorV2.dll, chúng ta đặt component và thư mục fckeditor như hình bên dưới.

Bước 4:

Thêm FredCK.FCKeditorV2.dll vào ToolboxĐể sử dụng control FCK bạn phải Add Toolbox bằng cách click toolbox và chọn Choose Items... và chọn file FredCK.FCKeditorV2.dll, hoặc kéo FredCK.FCKeditorV2.dll vàoToolbox.

Bước 5:

Thêm control vào pageChúng ta kéo FCK Editor từ Toolbox vào page, thì control sẻ được thêm vào và đăng kýassembly và namespace cần thiết.

Click chuột phải chọn View Browser hoặc nhấn F5 để xem kết quả.

Bước 6: Cấu hình để upload hình ảnh.

Nếu bạn cố gắng upload hình qua control image thì sẻ gặp lổi như phía dưới.
XML request error: OK (200)
Requested URL:http://localhost:2677/CS/fckeditor/e...=1223039353048
Để khắc phục vấn đề này chúng ta phải cấu hình lại FCK Editor, để cho phép người dùng có thể upload hình thông qua control image.
6.1 - Tạo một thư mục img để lưu hình người dùng tải lên.

6.2 - Tạo file Global.asax và thiết lập đường dẫn hình upload.
Thêm đoạn code trong sự kiện Application_Start
CS:

view plainprint?

1. void Application_Start(object sender, EventArgs e)  
2. {  
3. // Code that runs on application startup  
4. Application["FCKeditor:UserFilesPath"] = "../../../../../img/";  
5. }  

VB.NET

view plainprint?

1. [code]  
2. Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)  
3. ' Code that runs on application startup  
4. Application("FCKeditor:UserFilesPath") = "../../../../../img/"  
5. End Sub  

6.3 - Chỉnh sửa FileBrowserLanguage và QuickUploadLanguage ->> aspx của filefckconfig.js trong thư mục fckeditor.
Thử upload một hình thông qua control image thì sẻ gặp lổi như hinh sau:

Bởi vì khi upload hình FCK Editor buộc bạn phải chứng thực, bạn có thể tìm thấy trongfckeditor\editor\filemanager\connectors\aspx\confi g.ascx, bạn có thể viết code để chứng thực người chắc chắn phải có quyền để upload hình trong sự kiện CheckAuthentication

Ở đây mặc định luôn trả về false, mình sửa thành true, tức là đã chứng thực.
Xong giờ thử lại một lần nữa upload hình lên.

Kết luận:

Nếu bạn cần một công cụ soạn thảo văn bản mà tích hợp với nhiều trình duyệt thì FCK Editor là một lựa chọn hàng đầu, linh động, dễ dàng cấu hình tuỳ thích, hơn hẳn với các control khác (Freetext,..).
Mã nguồn: http://hp-aptech.edu.vn/files/folders/asp-aspnet/entry6429.aspx

[HaiPhong-Aptech] st

Posted in: Lập trình,Lập trình Web (asp.net)