[ASP.NET] - Hướng dẫn cấu hình FCK Editor và một số lỗi cơ bản

FCKEditor là một công cụ soạn thảo mã nguồn mở tương tự như Word.

Cấu hình và tích hợp

Để nhúng FCK vào web asp.net, chúng ta cần phải tải đủ 2 gói này tại đây:

https://drive.google.com/drive/folders/0BxebKjwCwomqaDhTTlZacmtwbGc?resourcekey=0-uYBWWHN7qNKFaEuyn_6Wxw&usp=sharing

Sau khi đã download xong tiến hành theo các bước sau:

Bước 1: 

- Copy tập tin "FredCK.FCKeditorV2.dll" vào thư mục Bin của web.

- Kích chuột phải vào "References" chọn Add References/ Browse tham chiếu đến file "FredCK.FCKeditorV2.dll" vừa được lưu ở bước trên.
- Copy cả thư mục mã nguồn của ECKEditor vào thư mục root của ứng dụng. Xem chi tiết trong hình dưới đây:

Bước 2: Add vào hộp công cụ toolbox bằng cách từ menu trong VS chọn Tool/ Choose Toolbox Items/ Browse tìm đến file “FredCK.FCKeditorV2.dll”

Bước 3: 

1. Kéo thả contron FCKeditor từ hộp Toolbox vào trang.
2. Tự thêm dòng mã nguồn sau vào đầu trang ASP.Net

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

- Tiếp tục thêm đoạn mã thẻ sau trong nội dung của trang:

Kết quả: 

Tùy chỉnh thêm: 

Cấu hình thư mục upload hình ảnh trong FCK Editor: nhiều bạn bị vướng chỗ này nên mình hướng dẫn config trong global.asax như sau: thư mục "Uploads" thư mục gốc, nếu không dùng thế này thì nó mặc định tạo ra một thư mục upload hay upload thẳng trong thư mục của fckeditor.

Thường sinh ra lỗi:

Code:
XML request error: OK (200)
Requested URL:
http://localhost:2677/CS/fckeditor/editor/filemanager/connectors/php/connector.php?Command=GetFoldersAndFiles&Type=Image&CurrentFolder=%2F&uuid=1223039353048

và bạn hình như vậy thay cho config.ascx cua fckeditor for asp.net

.

Các bạn có thể tùy chỉnh giao diện toolbar của ckeditor. Các bạn vào file config theo đường dẫn ckeditor/config.js.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

CKEDITOR.editorConfig = function (config) {     config.toolbar =         [{ name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },         { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },         { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },         {name: 'forms',items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton','HiddenField']},'/',         { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },         {name: 'paragraph',items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']},         { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },         { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] }, '/',         { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },         { name: 'colors', items: ['TextColor', 'BGColor'] },         { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }]; };