Dùng để: Viết trọn một plugin CKEditor 5 gồm nút thanh công cụ, hộp thoại nhập liệu và thao tác chèn khối nội dung đúng kiến trúc.
Nội dung prompt
VAI TRÒ Bạn là kiến trúc sư plugin CKEditor 5, chỉ dùng API của CKEditor 5 và tuyệt đối không dùng API của CKEditor 4. NHIỆM VỤ Viết mã nguồn hoàn chỉnh cho một plugin CKEditor 5 theo mô tả trong ĐẦU VÀO. Plugin thêm một nút trên thanh công cụ, mở hộp thoại nhập liệu, rồi chèn vào trình soạn thảo một khối có nhiều tab chuyển nội dung. ĐẦU VÀO - Tên plugin: [TÊN PLUGIN] - Nhãn nút: [NHÃN NÚT] - Các trường trong hộp thoại: [DANH SÁCH TRƯỜNG NHẬP] - Cấu trúc khối cần chèn: [MÔ TẢ BẰNG LỜI: THẺ NGOÀI, DANH SÁCH TAB, KHỐI NỘI DUNG] - Ngôn ngữ mã: [VÍ DỤ: TYPESCRIPT] - Kiểu build: [KIỂU BUILD TÙY BIẾN] QUY TẮC 1. Tách rõ phần editing và phần giao diện thành các tệp riêng: plugin, editing, ui, command. 2. Đăng ký schema cho phần tử khối, cho phép các thuộc tính class, id, href và thuộc tính dữ liệu. 3. Dùng upcast và downcast converter chuẩn, cùng các hàm chuyển phần tử thành widget khi cần. 4. Bắt sự kiện nhấp và nhấp đúp qua document của editing view, không gắn sự kiện trực tiếp lên DOM thô. 5. Khi nhấp vào liên kết tab trong trình soạn thảo thì đổi trạng thái active qua editor.model, mọi thay đổi giao diện phải đi qua mô hình. 6. Khi nhấp đúp thì mở lại hộp thoại và nạp dữ liệu hiện có để chỉnh sửa. 7. Bật GeneralHtmlSupport để giữ class và thuộc tính tùy biến, kèm hướng dẫn cấu hình trong editor config. 8. Không rút gọn logic, viết đủ import và chú thích giải thích kiến trúc. KHUÔN ĐẦU RA 1. Cây thư mục plugin. 2. Mã nguồn từng tệp. 3. Giải thích khác biệt chính so với CKEditor 4. 4. Cách đăng ký plugin vào bản build. 5. Đoạn cấu hình GeneralHtmlSupport mẫu.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Điểm cốt lõi của CKEditor 5 là mọi thay đổi phải đi qua mô hình, nên hãy nhắc lại yêu cầu này nếu mã sinh ra còn can thiệp DOM. Tách rõ phần editing và phần giao diện giúp bạn dễ bảo trì và mở rộng sau này. Nếu plugin cần lưu dữ liệu tab, hãy mô tả thêm cách dữ liệu đi từ hộp thoại vào mô hình. Khi nâng cấp phiên bản, đối chiếu lại tài liệu để tránh dùng API đã bỏ. Luôn chạy thử trên bản build tùy biến vì môi trường gốc có thể khác.
Prompt khác cùng nhóm
Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt