Đặt vấn đề

CKEditor là gì?

  • CKEditor là một trình soạn thảo văn bản HTML đã sẵn sàng cho sử dụng được thiết kế để đơn giản hóa việc tạo ra nội dung web. Đó là một trình soạn thảo WYSIWYG mang lại các tính năng xử lý văn bản phổ biến trực tiếp đến trang web của bạn.
  • CKEditor là một ứng dụng mã nguồn mở, có nghĩa là nó có thể được sửa đổi trong bất kỳ cách nào bạn muốn. Lợi ích của nó từ một cộng đồng năng động không ngừng phát triển các ứng dụng với các add-ons miễn phí và quá trình phát triển trong suốt (transparent development process).

Sử dụng CKEditor trong WAK.

*CKEditor được sử dụng để thay thế cho field TEXTAREA trong những trường hợp mà dữ liệu nhập vào lớn và yêu cầu cần được format dữ liệu 1 cách đẹp hơn như 1 trang dữ liệu dashboard hay email để gửi tới khách hàng.

Hình ảnh minh họa

Hình ảnh 1: CKEditor ứng dụng trong các trang WAK

ckeditor1.png

Hình ảnh 2: CKEditor được áp dụng trong 1 form WAK

ckeditor2.png

Hình ảnh 3: Thư mục CKEditor được cài đặt trên WAK

  • Plugin này đã được cài đặt mặc định trên web trong thư mục web/CKEditor như hình dưới đây.
ckeditor3-1.png

Hướng dẫn cách làm step-by-step

B1: Tạo 1 field TextArea

*File .dic

    TextArea==MAIL_CONTENT
        Trim
        LiveValidation
            Presence

*Trong file VN.dic
MAIL_CONTENT==Nội dung

B2:Khai báo Layout như các field bình thường

    Label==MAIL_CONTENT
    Control==MAIL_CONTENT
        BREAK

B3 Thay thế Field TextArea bằng CkEditor

  • Ở cuối file .dic viết node HTML-Footer viết code jQuery sau để thay thế 'TextArea' bên trên
Html
    Footer=:
    :{
        !contextPath = action.getRequest().getContextPath();
        "<script type=\"text/javascript\">" +
        "    fs_addLoadEvent(function(){CKEDITOR.config.entities = false;" +
        "    CKEDITOR.replace('MAIL_CONTENT', {height: 200});});" +
        "</script>";
    :}
  • Hãy chú ý đến dòng code sau:
CKEDITOR.replace('MAIL_CONTENT', {height: 200});});

- Dòng code này giúp bạn tự chỉnh sửa giao diện CkEditor theo ý của mình.Ví dụ bạn hoàn toàn có thể chỉnh sửa dòng lệnh trên thành như sau:
       CKEDITOR.replace( 'MAIL_CONTENT', {
           uiColor: '#14B8C4',
           toolbar: [
               [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
               [ 'FontSize', 'TextColor', 'BGColor' ]
           ]
       });

Để tham khảo,bạn có thể tham khảo nhiều thuộc tính hơn của CkEditor tại link sau :Hướng dẫn sử dụng trình soạn thảo CkEditor

Comment