Hướng dẫn cài Syntaxhighlighter trong CKeditor

Hướng dẫn cài Syntaxhighlighter trong CKeditor

Cài Syntaxhighlighter trong CKeditor.Tạo thêm một cái nút để có thể dùng trong khi Chạy Full HTML

Bước 1 : Cài đặt + cấu hình module Ckeditor

-Cài đặt module Ckeditor download tại đây hoặc cài bằng drush bằng câu lệnh dưới:

drush dl ckeditor

-Download thư viện cho ckeditor tại đây,giải nén và copy vào /sites/all/modules/ckeditor/ckeditor/ 

-Kích hoạt module và vào Configuration > Content authoring > Ckeditor để kiểm tra xem việc cấp quyền người dùng nào được phép dùng ckeditor (roles)

Bước 2 : Cài đặt + cấu hình module syntaxhighlighter.

-Tải module syntaxhighlighter tại đây.

-Tải thư viện của nó tại đây,sau đó giải nén và đặt trong thư mục /sites/all/libraries.(Lưu ý,nếu trong thư mục all không có sẵn thư mục libraries thì ta phải tự tạo).Đến lúc này bạn mới có thể kích hoạt module syntaxhighlighter được.

-Vào Configuration > Content authoring > syntaxhighlighter và chọn bất cứ ngôn ngữ nào mà bạn thích.Chú ý rằng chỉ nên chọn ngôn ngữ nào bạn cần thôi vì với mỗi một ngôn ngữ thì nó lại có một file javascript riêng.Chọn nhiều sẽ gây nặng trang web của bạn.

- Chọn theme mình thích tại link sau :

Bước 3: Cài đặt plugin Syntax highlighter Ckeditor

-Download plugin tại đây.Giải nén và copy thư mục syntaxhighlight từ ckeditor-syntaxhighlight/plugins/ sang /sites/all/module/ckeditor/plugins

-Sau đó vào /sites/all/modules/ckeditor/ckeditor.config.js để sửa file như sau:

config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi); // Code tags

config.extraPlugins = '';

config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );

Và thêm dòng sau vào cuối mỗi option Ckeditor

['DrupalBreak', 'DrupalPageBreak', 'Code']

-Tiếp theo ta sẽ thay đổi vài cấu hình của CKeditor.

Vào Configuration > Content authoring > Ckeditor và chọn kiểu profile nào mà bạn muốn thay đổi,ví dụ ở đây là Full HTML.

Chọn 'Editor Apearance' .Trong phần toolbar ta chọn Full (Đây là kiểu Drupal_full trong file ckeditor.config.js mà ta vừa sửa.Tiếp theo ta kích hoạt plugin Syntaxhightlight ở phía dưới

Và thế là ta đã xong.Chú ý nếu không thấy.Ta nên clear cache trình duyệt vì có thể trình duyệt đã cache lại các file javascript cũ.

Bạn thấy bài viết này như thế nào?: 
Average: 5 (1 vote)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
buong trung da nang

Buồng trứng đa nang: dấu hiệu và cách điều trị.

Bạn từng nghe nói đến buồng trứng đa nang? Bạn có biết đa nang buồng trứng là một bệnh liên quan đến hormone thường xảy ra ở phụ nữ trong độ tuổi sinh đẻ. Hội chứng buồng trứng đa nang có thể xảy ra ở bất cứ phụ nữ nào, tác động xấu đến khả năng sinh sản, gây ra nhiều bệnh nghiêm trọng khác. 

Cách tắt tính năng nhận diện khuôn mặt trên Facebook

Hướng dẫn tắt tính năng nhận diện khuôn mặt trên Facebook

Tính năng nhận diện khuôn mặt rất có giá trị đối với Facebook và cũng là một điểm thú vị đối với một bộ phận người dùng Facebook, nhưng nếu bạn không thích tính năng này bạn cũng có thể tắt đi.

Facebook cung cấp Timeline cho người dùng iPhone

Facebook cung cấp Timeline cho người dùng iPhone

Facebook đã cung cấp tính năng Timeline cho người sử dụng iPhone với một bản cập nhật 4.1 vừa được hãng phát hành

Tomdesgin.vn

 

Drupal Services