Cài đặt CKEditor-Syntaxhighlight Plugin cho CKEditor
Xem thêm các chuyên mục:
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.
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
CKEditor-SyntaxHighlight là một plugin viết cho CKEditor 3+, nó cho phép làm nổi bật cú pháp mã.
Tích hợp CKEditor-SyntaxHighlight vào CKEditor cho phép bạn soạn thảo văn bản với các vùng hiển thị Code cho các loại ngôn ngữ lập trình khác nhau. Xem hình minh họa dưới đây:
Bạn có thể thử với CKEditor-SyntaxHighlight:
Hoặc:
Đảm bảo rằng bạn đã download CKEditor. Bạn có thể xem hướng dẫn download và sử dụng CKEditor tại:
CKEditor-SyntaxHighlight là một addon, không sẵn có trên CKEditor khi bạn download về. Vì vậy bạn cần tích hợp CKEditor-SyntaxHighlight vào CKEditor.
Sau khi download CKEditor và giải nén:
Bạn có thể nhìn thấy hướng dẫn tóm tắt cách cài đặt CKEditor-SyntaxHighlight ngay sau khi bạn nhấn nút download.
CKEditor-SyntaxHighlight đòi hỏi plugin Dialog, bạn cũng cần phải download plugin này.
Addon Dialog đòi hỏi phải có plugin "Dialog User Interface" vì vậy bạn cũng cần download plugin này:
Kết quả download được:
Giải nén các file bạn đã download trước đó.
Copy thư mục syntaxhighlight,dialog, dialogui vào thư mục 'plugins' của CKEditor. Nếu plugin nào đã có sẵn trong CKEditor bạn vẫn có thể copy đè lên.
Tạo thư mục highlight-examples, các ví dụ trong tài liệu này sẽ được đặt ở đây:
example1.html
<!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">
<textareaid="editor1" name="editor1" cols="80" rows="10">
<p>Hello <strong>CKEditor</strong></p>
</textarea>
<script>
CKEDITOR.replace( 'editor1' ,{
extraPlugins : 'syntaxhighlight',
toolbar: [
['Source'] ,
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ,
['Syntaxhighlight']
]
});
</script>
</form>
</body>
</html>
Chạy ví dụ:
Kết quả chạy ví dụ:
Bạn có thể nhấn vào "Source" để xem mã HTML được tạo ra.
Phía trên tôi đã hướng dẫn bạn nhúng CKEditor-SyntaxHighlight vào trình soạn thảo CKEditor. Thông thường sau khi soạn thảo trên CKEditor, nội dung có thể là một bài báo, một bài viết, nó sẽ được lưu trữ trên Database, và sẽ có một trang hiển thị nội dung của bài viết đó.
Bạn cần phải download SyntaxHighlighter với các style, để nó làm nổi bật nội dung code bạn đã soạn thảo trong CKEditor.
Xem thêm:
*
