Hướng dẫn ckeditor css

Mục lục

1- Giới thiệu

Tài liệu được viết dựa trên:

• CKEditor 4.4.7

2- 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à bạn có thể sửa đổi nó theo bất kỳ cách nào bạn muốn. Lợi ích của nó đế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 minh bạch [transparent development process].

3- Download CKEditor

Bạn có 4 lựa chọn download CKEditor.

1. Basic Package:
   • Đây là gói cơ bản, bao gồm các chức năng cơ bản của CKEditor, và là gói nhỏ gọn.
2. Standard Package:
   • Đây là gói tiêu chuẩn có khoảng 48 plugin.
3. Full Package:
   • Đây là gói đầy đủ, với tất cả các plugin của CKEditor. Và là gói nặng nhất.
4. Customize CKEditor Package:
   • Đây là gói tùy biến, bạn có thể lựa chọn các Plugin cần thiết để download về.

Bạn có thể nhấn vào đường link [5] để xem chi tiết sự khác biệt giữa các gói.

Ở đây tôi sẽ download gói đầy đủ các plugin:

Kết quả download được:

Giải nén:

Bạn có thể xem các ví dụ của CKEditor tại thư mục samples:

4- Các ví dụ cơ bản

Tất cả các ví dụ trong tài liệu này đều có trong thư mục samples của CKEditor mà bạn đã download về. Tuy nhiên tôi cố gắng làm nó đơn giản hơn để bạn tiếp cận một cách dễ dàng hơn.
 

Tạo thư mục myexamples, các ví dụ trong tài liệu này sẽ được đặt trong thư mục đó.

4.1- Thay thế các phần tử Textarea sử dụng JavaScript

Ví dụ đơn giản sử dụng CKEditor.replace[..] để thay thế bởi CKEditor.

replacebycode.html

   
   Replace Textarea by Code
  
   
   
  


   
Replace Textarea Elements Using JavaScript Code
  
   
  
       
       
           
Hello CKEditor
       
      
       
       

           CKEDITOR.replace[ 'editor1' ];

           
          
   

Xem ví dụ:

Kết quả chạy ví dụ:

4.2- Thay thế các phần tử textarea bởi class name

Với các có thuộc tính name, và class ="ckeditor" sẽ tự động được thay thế bởi CKEditor.

 


 Text 

replacebyclass.html

   
   Replace Textareas by Class Name
  
   
  



   
Replace Textarea Elements by Class Name
  
   

       
      
           
Hello CKEditor
          
       
      
    
  

Chạy ví dụ:

4.3- Tạo các CKEditor với jQuery

Ví dụ tạo CKEditor sử dụng JQuery.

jquery.html

   
   jQuery Adapter — CKEditor Sample
  
   
  
   
   
  
   

       $[ document ].ready[ function[] {
           $[ '#editor1' ].ckeditor[];  
       } ];

       function setValue[] {
           $[ '#editor1' ].val[ $[ 'input#val' ].val[] ];
       }

   



   
Create Editors with jQuery
  
   

       
           
Hello CKEditor
       

  
       
       
      
   
  

Chạy ví dụ:

5- Tùy biến cơ bản

5.1- Thay đổi màu giao diện

CKEDITOR.replace[ 'textarea_id', {
    uiColor: '#14B8C4'
}];

uicolor.html

   
   UI Color Picker
  
   
  


   
UI Color
  
   
       
Hello CKEditor
   
  
   

       // Replace the  with an CKEditor
       // instance, using default configurations.
       CKEDITOR.replace[ 'editor1', {
           uiColor: '#14B8C4',
           toolbar: [
               [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
               [ 'FontSize', 'TextColor', 'BGColor' ]
           ]
       }];

   

Chạy ví dụ:

Xem thêm:

5.2- Thay đổi ngôn ngữ

uilanguages.html

   
      
      User Interface Globalization
      
      
      
   
   
  
      
User Interface Languages
      
      
         
            English [United Kingdom]
            Vietnamese
            Chinese Simplified
            Chinese Traditional
         
        
         
               
Hello CKEditor
         
        
         
            var editor;
            
            function createEditor[ languageCode ] {
                if [ editor ]
                    editor.destroy[];          
      
                // Thay thế