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?: 
No votes yet
Ả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.
10 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 
"Đổ thùng rác" tự động bằng AppleScript cho Mac

"Đổ thùng rác" tự động bằng AppleScript cho Mac

Thủ thuật này chỉ có hiệu nghiệm khi bạn áp dụng đoạn code, không phải là mọi lúc đều tự động xóa sạch nội dung Trash.

Quảng cáo Google Adwords để thử nghiệm từ khóa

Quảng cáo Google Adwords để thử nghiệm từ khóa

Các web bán hàng trên Internet của các doanh nghiệp hiện nay đang là kênh tiếp xúc với khách hàng rất hiệu quả và chi phí bỏ ra khá thấp. Vì vậy doanh nghiệp nào cũng muốn web của mình lên top Google để có nhiều khách hàng.

Barca lệ thuộc vào Messi

Lối đá pressing, thoát pressing và chuyển trạng thái nhanh đã lên ngôi 2020

Việc Lionel Messi công khai chỉ trích Giám đốc thể thao Eric Abidal không chỉ là sự xung đột giữa những cái tôi. Nó phơi bày cuộc khủng hoảng ngầm tại Barca. 

Wordpress Freelancer

 

Wordpress Freelancer