Nhúng FCK editor vào ứng dụng ASP.NET Nguồn : forum.t3h.vn Nhúng FCK editor vào ứng dụng ASP.NET Giới thiệu: FCK Editor là 1 công cụ soạn thảo văn bản mã nguồn mở giống như Microsoft Wor
Trang 1Nhúng FCK editor vào ứng dụng ASP.NET
Nguồn : forum.t3h.vn
Nhúng FCK editor vào ứng dụng ASP.NET
Giới thiệu:
FCK Editor là 1 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+, Mozilla 1.3+ và Netscape
Cách dùng:
FCK editor phát hành bao gồm 1 gói javascript và 1 thành phần (component) dành cho NET, để có thể nhúng (embed) FCK vào 1 ứng dụng web asp.net, chúng ta cần phải tải đủ 2 gói này tại đây
Code:
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ại đây
Code:
http://sourceforge.net/project/showfiles.php?group_id=7 5348&package_id=137125
Ở đây mình 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 (tuỳ), sau đó thêm 1 website mới ngôn ngữ mà bạn đang sài
Trang 2Bước 2: Giải nén mã nguồn FCK editor và thêm component FCK editor vào Toolbox
Giải nén mã nguồn FCK editor chúng ta có 1 thư mục đặt tên là fckeditor và 1 .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ào toolbox
Trang 3Bước 5: thêm control vào page
Chú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
Trang 4Click 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
Code:
XML request error: OK (200)
Requested URL:
http://localhost:2677/CS/fckeditor/editor/filemanager/c onnectors/php/connector.php?Command=GetFoldersAndFiles& Type=Image&CurrentFolder=%2F&uuid=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 1 thư mục img để lưu hình người dùng tải lên
Trang 56.2 - Tạo 1 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:
Code:
void Application_Start(object sender, EventArgs e) {
// Code that runs on application startup
Application["FCKeditor:UserFilesPath"] =
" / / / / /img/";
}
VB.NET
Code:
Sub Application_Start(ByVal sender As Object, ByVal
e As EventArgs)
' Code that runs on application startup
Application("FCKeditor:UserFilesPath") =
" / / / / /img/"
End Sub
6.3 - chỉnh sửa FileBrowserLanguage và QuickUploadLanguage ->> aspx của file fckconfig.js trong thư mục fckeditor
Thử upload 1 hình thông qua control image thì sẻ gặp lổi như hinh sau:
Trang 6Bở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 trong fckeditor\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 1 lần nửa upload hình lên
Trang 7Kết luận:
Nếu bạn cần 1 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à 1 những 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: VS2008
Code:
http://vi-vn.com/pubs/Articles/FCKEditor/FCK.Editor.rar Theo
Code:
http://forum.vi-vn.com/forum/Topic263-20-1.aspx