CKEditor 5 là trình soạn thảo văn bản mạnh mẽ và linh hoạt, được phát triển bởi hãng công nghệ CKSource. Nó là phiên bản tiếp theo của CKEditor, một trình soạn thảo văn bản phổ biến và được sử dụng rộng rãi trên web.
CKEditor 5 được thiết kế để cung cấp trải nghiệm soạn thảo văn bản đa nền tảng, đơn giản và dễ sử dụng. Nó cung cấp một giao diện người dùng tương tác, giúp người dùng chỉnh sửa văn bản một cách linh hoạt và tiện lợi. CKEditor 5 hỗ trợ một loạt các tính năng như định dạng văn bản, chèn hình ảnh, bảng, liên kết và nhiều tính năng khác để tạo ra nội dung phong phú trên web.
Một trong những điểm mạnh của CKEditor 5 là kiến trúc plugin mở rộng, cho phép người dùng tùy chỉnh và mở rộng chức năng của trình soạn thảo theo nhu cầu cụ thể. Nó cũng hỗ trợ các tính năng như kiểm soát kiểm duyệt nội dung, tích hợp với các hệ thống quản lý nội dung (CMS) và tích hợp dễ dàng vào các ứng dụng web hiện có.
CKEditor 5 được xây dựng trên nền tảng JavaScript và cung cấp các gói cài đặt cho các framework phổ biến như Angular, React và Vue.js. Bạn có thể tích hợp CKEditor 5 vào trang web của mình bằng cách sử dụng các gói cài đặt và API được cung cấp bởi CKEditor.
Đầu tiên sử dụng CDN sau:
<script src="
https://cdn.jsdelivr.net/npm/ckeditor5-classic-free-full-feature@35.4.1/build/ckeditor.min.js
"></script>
Sau đó chèn đoạn code HTML sau để bắt lấy thẻ div với id tương ứng:
<div id="editor"></div>
Viết thêm đoạn code sau để kích hoạt sự kiện tạo các phần tử nhúng vào bên trong thẻ editor:
<script>
ClassicEditor
.create(document.querySelector('#editor'),{
plugins: ['Essentials',
'Paragraph',
'Heading',
'Bold',
'Italic',
'Underline',
'Strikethrough',
'SourceEditing',
'Subscript',
'Superscript',
'Alignment',
'Indent',
'IndentBlock',
'BlockQuote',
'Link',
'Image',
'ImageCaption',
'ImageStyle',
'ImageToolbar',
'ImageUpload',
'List',
'MediaEmbed',
'PasteFromOffice',
'Table',
'TableToolbar',
'TableProperties',
'TableCellProperties',
'Highlight',
'FontFamily',
'FontSize',
'FontColor',
'FontBackgroundColor', 'GeneralHtmlSupport', /* ... */]
})
.catch(error => {
console.error(error);
});
</script>Việc tiếp theo làm thế nào để lấy dữ liệu và gán dữ liệu
// Lấy giá trị từ các trường thuộc tính của trong form
const domEditableElement = document.querySelector('.ck-editor__editable_inline');
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
//get data
SubjectContent: editorInstance.getData()
// Use the editor instance API
editorInstance.setData(response.data.subjectContent);