Cấp bậc tác giả:

DOTNET

Hướng dẫn sử dụng ckeditor5 miễn phí trong ASP.NET MVC Core

Được viết bởi webmaster ngày 15/12/2023 lúc 11:05 AM
CKEditor 5 là một 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.
  • 0
  • 584

Hướng dẫn sử dụng ckeditor5 miễn phí trong ASP.NET MVC Core

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.

ckeditor5.jpg

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);

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML