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 AutumnNote.
AutumnNote là gì?
AutumnNote 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, AutumnNote 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.
AutumnNote có miễn phí không?
Có. AutumnNote 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.
AutumnNote thay thế cho những lựa chọn nào như Summernote, Quill, TinyMCE?
AutumnNote 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, AutumnNote không có bất kỳ dependency runtime nào và không yêu cầu jQuery.
Làm sao để cài đặt AutumnNote?
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').