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ũ.