Hướng dẫn ckeditor html - ckeditor html

Question

Mục lục

Nội dung chính Show

Mục lục
1- Giới thiệu
2- CKEditor là gì?
3- Download CKEditor
4- Các ví dụ cơ bản
4.1- Thay thế các phần tử Textarea sử dụng JavaScript
4.2- Thay thế các phần tử textarea bởi class name
4.3- Tạo các CKEditor với jQuery
4.3- Tạo các CKEditor với jQuery
Ví dụ tạo CKEditor sử dụng JQuery.
Ví dụ tạo CKEditor sử dụng JQuery.
4.3- Tạo các CKEditor với jQuery
Ví dụ tạo CKEditor sử dụng JQuery.
4.3- Tạo các CKEditor với jQuery
Ví dụ tạo CKEditor sử dụng JQuery.
5- Tùy biến cơ bản
5.1- Thay đổi màu giao diện
Ví dụ này thể hiện những tính năng chỉnh sửa nội tuyến (inline editing) - đối tượng CKEditor sẽ được tạo ra tự động từ các phần tử (element) có thuộc tính contenteditable = 'true'.
Bạn có thể sửa đổi nội dung HTML bên trong các thẻ có thuộc tính contenteditable='true'. Và thanh công cụ sẽ hiển thị khi bạn hiệu chỉnh:
7.3- Các thuộc tính cấu hình
8- Các cách cấu hình Toolbar
8.1- Cấu hình Toolbar "Item by Item"
8.2- Cấu hình nhóm Toolbar (Toolbar Groups)
8.3- Danh sách các group và Item xây dựng sẵn của CKEditor
9- Các ví dụ khác trên website CKEditor

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

Facebook

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. 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). 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. CKEditor.

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.
Standard Package: :
- Đây là gói tiêu chuẩn có khoảng 48 plugin.
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.
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: 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. 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 đó. 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. CKEditor.replace(..) để thay thế </strong> bởi <strong>CKEditor</strong>. </p><p><p>replacebycode.html</p> <pre><code> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Replace Textarea by Code</title>  <script src="../ckeditor.js"></script> </head> <body> <h2>Replace Textarea Elements Using JavaScript Code</h2> <form action="" method="post">  <textarea id="editor1" name="editor1" cols="80" rows="10"> <p>Hello <strong>CKEditor</strong></p>

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. </strong> có thuộc tính <strong>name,</strong> và <strong>class ="ckeditor"</strong> sẽ tự động được thay thế bởi <strong>CKEditor</strong>. </p><p><pre><code> <texarea name = "editor1" class="ckeditor"> </texarea> <textarea name = "editor2" class="ckeditor"> Text

replacebyclass.html





   
   Replace Textareas by Class Name
  
   
  



   Replace Textarea Elements by Class Name
  
   

             
           <p>Hello <strong>CKEditor</strong></p>

Chạy ví dụ:

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

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

jquery.html





   
   jQuery Adapter — CKEditor Sample
  
   
  
   
   
  
   



   Create Editors with jQuery
  
   

                  <p>Hello <strong>CKEditor</strong></p>

Chạy ví dụ:

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

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


CKEDITOR.replace( 'textarea_id', {
    uiColor: '#14B8C4'
});

uicolor.html





   
   UI Color Picker
  
   
  


   UI Color
  
          <p>Hello <strong>CKEditor</strong></p>

Chạy ví dụ:

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

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

uilanguages.html




   
      
      User Interface Globalization
      
      
      
   
   
  
      User Interface Languages
      
      
         
        
                        <p>Hello <strong>CKEditor</strong></p>

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

/samples/assets/uilanguages/languages.js

Chạy ví dụ:

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

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

5- Tùy biến cơ bản CKEditor sẽ được tạo ra tự động từ các phần tử (element) có thuộc tính contenteditable = 'true'.

5.1- Thay đổi màu giao diện HTML bên trong các thẻ có thuộc tính contenteditable='true'. Và thanh công cụ sẽ hiển thị khi bạn hiệu chỉnh:

Xem thêm: h2, h2, h3 hoặc thẻ có id = taglist, và có contenteditable = 'true', thì thanh công cụ đơn giản sẽ hiển thị (Đã loại bỏ các plugin colorbutton, find, flash, fonts,... )
5.2- Thay đổi ngôn ngữ

Chú ý: Danh mục các mã ngôn ngữ và tên ngôn ngữ bạn có thể xem trong:

inlineall.html




  
     
     Massive inline editing
     
    
     
  
  
     Massive inline editing
    
     
    
          
              H1 With contenteditable='true'
          
        
          
             div with contenteditable='true'
             H1 H1 H1
             H2 H2
             H3 H3              
          
        
          
             div with contenteditable='true' 


             Hello CKEditor ...

Chạy ví dụ:

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

inlinebycode.html





   
   Inline Editing by Code — CKEditor Sample
   
  

   


   Inline Editing by Code

   
        Hello CKEditor

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

inlinetextarea.html




   
      
      Replace Textarea with Inline Editor
      
      
      
      
      
   
     
      Replace Textarea with Inline Editor
      
    
                     <p>Hello <strong>CKEditor</strong></p>

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

jquery-inline.html


 


 Text

0
5.1- Thay đổi màu giao diện
Xem thêm: CKEditor tại thời điểm chạy. Bạn có 2 cách để cấu hình cho CKEditor:
5.2- Thay đổi ngôn ngữ :
Chú ý: Danh mục các mã ngôn ngữ và tên ngôn ngữ bạn có thể xem trong: CKEditor, những cái không chỉ định rõ cấu hình.
6- Chỉnh sửa nội tuyến (Inline Editing)
6.1- Tạo một trình soạn thảo nội tuyến phức tạp CKEditor được cấu hình.
Ví dụ này thể hiện những tính năng chỉnh sửa nội tuyến (inline editing) - đối tượng CKEditor sẽ được tạo ra tự động từ các phần tử (element) có thuộc tính contenteditable = 'true'.
Bạn có thể sửa đổi nội dung HTML bên trong các thẻ có thuộc tính contenteditable='true'. Và thanh công cụ sẽ hiển thị khi bạn hiệu chỉnh:
Chú ý: Danh mục các mã ngôn ngữ và tên ngôn ngữ bạn có thể xem trong: CKEditor, những cái không chỉ định rõ cấu hình.
6- Chỉnh sửa nội tuyến (Inline Editing)
Text
1
config-static.html
Text
2
6.1- Tạo một trình soạn thảo nội tuyến phức tạp
Ví dụ này thể hiện những tính năng chỉnh sửa nội tuyến (inline editing) - đối tượng CKEditor sẽ được tạo ra tự động từ các phần tử (element) có thuộc tính contenteditable = 'true'.Toolbar
Bạn có thể sửa đổi nội dung HTML bên trong các thẻ có thuộc tính contenteditable='true'. Và thanh công cụ sẽ hiển thị khi bạn hiệu chỉnh:
Nếu h2, h2, h3 hoặc thẻ có id = taglist, và có contenteditable = 'true', thì thanh công cụ đơn giản sẽ hiển thị (Đã loại bỏ các plugin colorbutton, find, flash, fonts,... )CKEditor trong trang bạn có thể cấu hình khác nhau cho chúng. Ví dụ một trang web có 2 CKEditor khác nhau với Toolbar khác nhau về số lượng Button.
Ngược lại thanh công cụ sẽ hiển thị mặc định.
Text
3
Thử trực tuyến:
7.3- Các thuộc tính cấu hình
Danh sách các thuộc tính cấu hình bạn có thể xem tại:
8- Các cách cấu hình Toolbar
Có một số phương pháp tiếp cận để CKEditor cấu hình thanh công cụ của nó: CKEditor cấu hình thanh công cụ của nó:

Sử dụng bộ cấu hình Toolbar (Toolbar Configurator)
...
Cấu hình "Item by Item"
config.toolbar
Cấu hình nhóm Toolbar (Toolbar Groups)
config.toolbarGroups
8.1- Cấu hình Toolbar "Item by Item"
Bạn có thể cấu hình Toolbar theo kiểu "Item by Item", có nghĩa là bạn khai báo ra các nhóm, mỗi nhóm bao gồm các Button. Toolbar theo kiểu "Item by Item", có nghĩa là bạn khai báo ra các nhóm, mỗi nhóm bao gồm các Button.
Sau đây là một đoạn code cấu hình Toolbar. Toolbar.
Text
4
Bạn cũng có thể không cần thiết phải khai báo tên nhóm.
Text
5
toolbar-itembyitem.html
Text
6
Chạy trực tuyến:
8.2- Cấu hình nhóm Toolbar (Toolbar Groups)
Lợi ích của việc cấu hình nhóm:

Lợi ích quan trọng nhất của cấu hình thanh công cụ nhóm (Toolbar Groups Configuration) so với cấu hình "Item by item" chính là: sự tự động."Item by item" chính là: sự tự động.
Nó cho phép các nhà phát triển plugin định nghĩa ra một nhóm, mà button của họ có thể được thêm vào. plugin định nghĩa ra một nhóm, mà button của họ có thể được thêm vào.
Trong khi không bắt buộc, có tất cả các nhóm và các nhóm nhóm con đã cấu hình (bao gồm cả những cái mà bạn không sử dụng) được tiến cử (recommended) tại thời điểm trong tương lai, khi một plugin mới được cài đặt, nút đó sẽ tự động xuất hiện trên thanh công cụ không cần yêu cầu cấu hình thêm. plugin mới được cài đặt, nút đó sẽ tự động xuất hiện trên thanh công cụ không cần yêu cầu cấu hình thêm.
Ví dụ:
Text
7
Lợi ích của cấu hình Toolbar Groups đó là khi bạn thay đổi thư viện CKEditor lên phiên bản mới hơn, nếu trong group nào đó ở phiên bản mới có thêm một Button mới, nó sẽ tự động được hiển thị trên thanh Toolbar, bạn không cần phải sửa đổi code của trang web của mình. Toolbar Groups đó là khi bạn thay đổi thư viện CKEditor lên phiên bản mới hơn, nếu trong group nào đó ở phiên bản mới có thêm một Button mới, nó sẽ tự động được hiển thị trên thanh Toolbar, bạn không cần phải sửa đổi code của trang web của mình.
Bạn cũng có thể sử dụng "/" trong cấu hình Toolbar để ngắt dòng (Đẩy các button phía sau xuống dòng mới). "/" trong cấu hình Toolbar để ngắt dòng (Đẩy các button phía sau xuống dòng mới).
Text
8
toolbar-group.html
Text
9
Chạy ví dụ:
8.3- Danh sách các group và Item xây dựng sẵn của CKEditor
Đây là định nghĩa các nhóm trong CKEditor 3.x: CKEditor 3.x:
Replace Textareas by Class Name Replace Textarea Elements by Class Name <p>Hello <strong>CKEditor</strong></p>
0
9- Các ví dụ khác trên website CKEditor
Ví dụ tạo tùy biến một Plugin cho CKEditor của bạn. Plugin cho CKEditor của bạn.
Create CKEditor Plugin:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.

programming html Ckeditor4 CKEditor HTML CDN CKEditor 4 CKEditor download

Hướng dẫn ckeditor html - ckeditor html

Mục lục

1- Giới thiệu

2- CKEditor là gì?

3- Download CKEditor

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

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

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

Replace Textarea Elements by Class Name

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

Create Editors with jQuery

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

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

UI Color

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

User Interface Languages

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

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

Massive inline editing

H1 With contenteditable='true'

H1 H1 H1

H2 H2

H3 H3

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

Inline Editing by Code

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

Replace Textarea with Inline Editor

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

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

Ví dụ này thể hiện những tính năng chỉnh sửa nội tuyến (inline editing) - đối tượng CKEditor sẽ được tạo ra tự động từ các phần tử (element) có thuộc tính contenteditable = 'true'.

Bạn có thể sửa đổi nội dung HTML bên trong các thẻ có thuộc tính contenteditable='true'. Và thanh công cụ sẽ hiển thị khi bạn hiệu chỉnh:

7.3- Các thuộc tính cấu hình

8- Các cách cấu hình Toolbar

8.1- Cấu hình Toolbar "Item by Item"

8.2- Cấu hình nhóm Toolbar (Toolbar Groups)

8.3- Danh sách các group và Item xây dựng sẵn của CKEditor

Replace Textarea Elements by Class Name

9- Các ví dụ khác trên website CKEditor

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội