Trình soạn thảo WYSIWYG nhanh, nhẹ
cho Vanilla JavaScript
Trình soạn thảo WYSIWYG hiện đại được xây dựng bằng vanilla JavaScript (ES2022+) — không cần jQuery, không phụ thuộc runtime, hỗ trợ TypeScript đầy đủ ngay từ đầu.
npm install autumnnote
- ✦ Không phụ thuộc thư viện
- ✦ ES2022 + TypeScript
- ✦ Giao diện Sáng / Tối
- ✦ 8 ngôn ngữ (i18n)
- ✦ Thanh công cụ nổi
- ✦ Phím tắt Markdown
- ✦ Tự động gợi ý @mention
- ✦ Khôi phục tự động lưu
- ✦ Tìm & Thay thế (nổi)
- ✦ Cắt ảnh trực tiếp
- ✦ Gộp / tách ô bảng
- ✦ Tô màu nền ô
- ✦ Tự động nhận diện ngôn ngữ
- ✦ Tô màu cú pháp SCSS
- ✦ Hộp thoại kéo thả
- ✦ ~380 biểu tượng cảm xúc
- ✦ Bộ chọn icon FontAwesome
- ✦ Nhúng video
- ✦ React wrapper
- ✦ Vue 3 wrapper
- ✦ Monorepo pnpm
Demo trực tiếp
Chọn văn bản để xem thanh công cụ nổi ·
Gõ @ để nhắc đến ai đó ·
Bắt đầu dòng với ## để tạo tiêu đề ·
Thử **đậm** ngay trong dòng
Kết quả HTML
Xem trước (chỉ đọc)
🔒 Chỉ đọcBắt đầu chỉ trong vài giây
Hoạt động với mọi bundler hoặc trực tiếp qua CDN — không cần bước build.
npm install autumnnoteimport AutumnNote from 'autumnnote';
import 'autumnnote/dist/autumnnote.css';
const editor = AutumnNote.create('#my-editor', {
placeholder: 'Bắt đầu gõ…',
height: 300,
bubbleToolbar: true,
onChange(html) { console.log(html); },
});npm install autumnnote autumnnote-react
// App.jsx
import { useRef } from 'react';
import AutumnNoteEditor from 'autumnnote-react';
import 'autumnnote/dist/autumnnote.css';
function MyEditor() {
const ref = useRef(null);
return <AutumnNoteEditor ref={ref} options={{ placeholder: 'Bắt đầu gõ…' }} />;
}npm install autumnnote autumnnote-vue
<!-- MyEditor.vue -->
<script setup>
import AutumnNoteEditor from 'autumnnote-vue';
import 'autumnnote/dist/autumnnote.css';
</script>
<template>
<AutumnNoteEditor :options="{ placeholder: 'Bắt đầu gõ…' }" />
</template><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/autumnnote/dist/autumnnote.css">
<script src="https://cdn.jsdelivr.net/npm/autumnnote"></script>
<script>
const editor = AutumnNote.create('#my-editor');
</script>Câu hỏi thường gặp
Các câu hỏi phổ biến về trình soạn thảo WYSIWYG Autumn Note.
Autumn Note là gì?
Autumn Note là một trình soạn thảo WYSIWYG rich-text không phụ thuộc, được xây dựng bằng vanilla JavaScript (ES2022+). Không cần jQuery hay bất kỳ dependency runtime nào, Autumn Note cung cấp các tính năng như thanh công cụ nổi, @mention, phím tắt markdown, chế độ tối, chỉnh sửa bảng, thay đổi kích thước ảnh/video, và Plugin API. Thư viện được phát hành dưới dạng ES Module và UMD, kèm theo wrapper chính thức cho React và Vue 3.
Autumn Note có miễn phí không?
Có. Autumn Note là mã nguồn mở, được phát hành theo giấy phép MIT. Miễn phí cho cả mục đích cá nhân và thương mại.
Autumn Note thay thế cho những lựa chọn nào như Summernote, Quill, TinyMCE?
Autumn Note là một lựa chọn hiện đại thay thế cho Summernote, Quill, TinyMCE, Froala, CKEditor, ProseMirror, Trix và Slate. Khác với hầu hết các thư viện này, Autumn Note không có bất kỳ dependency runtime nào và không yêu cầu jQuery.
Làm sao để cài đặt Autumn Note?
Cài đặt qua npm: npm install autumnnote. Sau đó import thư viện và CSS: import AutumnNote from 'autumnnote'; import 'autumnnote/dist/autumnnote.css';. Khởi tạo editor bằng AutumnNote.create('#my-editor').