Full-featured WYSIWYG HTML Editor With Image Upload – Autumn Note

Autumn Note is a vanilla JavaScript WYSIWYG editor with rich text editing, media insertion, table tools, code view, and sanitized HTML output.

It’s ideal for CMS forms, admin dashboards, documentation tools, email composers, newsletter builders, and comment & discussion platforms.

Features:

• Text formatting: bold, italic, underline, strikethrough, superscript, subscript, and more.
• Paragraph styles: Normal text, six heading levels, blockquote, and fenced code block.
• Ten built-in typefaces and accepts a custom list via configuration.
• Line height control.
• Text and highlight color picker.
• Alignment controls: left, center, right, and justify.
• Ordered lists, unordered lists, and interactive checklists.
• Undo and redo history.
• Tab key inserts a configurable number of spaces or indents the active list item in a list context.
• RTL layout support.
• Link dialog auto-fills the display text from the current selection and includes an open-in-new-tab option.
• Images are loaded by URL or file upload, with base64 embedding or server-side upload.
• Inline image crop tool.
• Accepts YouTube, Vimeo, and direct MP4, WebM, or OGG URLs and renders each as a responsive iframe or video element.
• Table grid picker.
• Emoji picker: 380 Unicode characters across seven categories with keyword search.
• FontAwesome icon picker with keyword search and configurable style, size, and color.
• Find and Replace dialog.
• Right-click context menu.
• Sticky toolbar pins to the top of the viewport during page scroll.
• Dark and light themes.
• Status bar tracks live word and character counts and provides a drag handle to resize the editor height.
• HTML source view.
• Auto-save persists content to the browser’s local storage on every change.
• Read-only mode.
• 8 built-in UI locales.

Keyboard shortcuts:

Keys	Action
Ctrl + Z	Undo
Ctrl + Shift + Z / Ctrl + Y	Redo
Ctrl + B	Bold
Ctrl + I	Italic
Ctrl + U	Underline
Ctrl + F	Open Find dialog
Ctrl + H	Open Find & Replace dialog
Shift + Enter	Insert line break
Tab	Insert spaces / indent list item
Shift + Tab	Outdent list item
Shift + ?	Open Keyboard Shortcuts dialog

How to use it:

1. Install Autumn Note and then import the module and its stylesheet:

# Yarn
$ yarn add autumnnote

# NPM
$ npm install autumnnote

# PNPM
$ pnpm install autumnnote

// Import the editor class
import AutumnNote from 'autumnnote';

// Import the editor stylesheet
import 'autumnnote/dist/autumnnote.css';

2. Or load the core JavaScript & stylesheet via a CDN:

<!-- Editor stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/autumnnote/dist/autumnnote.css">

<!-- UMD bundle; exposes AutumnNote as a global -->
<script src="https://cdn.jsdelivr.net/npm/autumnnote"></script>

3. Autumn Note detects FontAwesome on the page and falls back to built-in SVG icons when it is absent. To activate FA icons, add the FA stylesheet before the editor script:

<link rel="stylesheet" href="/path/to/cdn/font-awesome/css/all.min.css">

4. Create a basic editor instance on the #article-editor element:

const editor = AutumnNote.create('#article-editor', {
  // options here
});

// UMD / script tag:
// AutumnNote is available as a global after the UMD bundle loads
const editor = AutumnNote.create('#article-editor', {
  // options here
});

5. Custom server-side image upload:

const editor = AutumnNote.create('#article-editor', {
  onImageUpload(files) {
    const payload = new FormData();
    payload.append('image', files[0]);
    fetch('/media/images/upload', { method: 'POST', body: payload })
      .then(res => res.json())
      .then(({ url }) => editor.insertImage(url, files[0].name));
  },
});

6. The toolbar option takes an array of button group arrays. Each group is an array of button definition objects exported from the package:

import AutumnNote, {
  boldBtn, italicBtn, underlineBtn, strikeBtn,
  superscriptBtn, subscriptBtn,
  alignLeftBtn, alignCenterBtn, alignRightBtn, alignJustifyBtn,
  ulBtn, olBtn, checklistBtn, indentBtn, outdentBtn,
  undoBtn, redoBtn,
  hrBtn, linkBtn, imageBtn, videoBtn,
  emojiBtn, iconBtn, tableBtn,
  fontFamilyBtn, paragraphStyleBtn, lineHeightBtn,
  foreColorBtn, backColorBtn,
  findBtn, findReplaceBtn,
  codeviewBtn, fullscreenBtn, shortcutsBtn,
} from 'autumnnote';

// Minimal toolbar for a comment or reply editor
AutumnNote.create('#comment-editor', {
  toolbar: [
    [undoBtn, redoBtn],
    [boldBtn, italicBtn, underlineBtn],
    [ulBtn, olBtn, checklistBtn],
    [linkBtn, imageBtn],
    [findBtn, findReplaceBtn],
  ],
});

// Pass an empty array to hide the toolbar entirely
// All keyboard shortcuts remain fully active
AutumnNote.create('#minimal-editor', { toolbar: [] });

7. All configuration options and callback functions.

• placeholder (string): Placeholder text shown when the editor is empty.
• height (number): Initial editor height in pixels. Default is 200.
• minHeight (number): Minimum resizable height in pixels. Default is 100.
• maxHeight (number): Maximum resizable height in pixels. 0 means unlimited.
• focus (boolean): Automatically focuses the editor on creation. Default is false.
• resizable (boolean): Shows the resize handle at the bottom of the editor. Default is true.
• toolbar (Array[]): Toolbar layout as an array of button group arrays. Defaults to all available buttons.
• toolbarOverflow (string): Toolbar overflow strategy. Accepts 'wrap' (default) or 'scroll'.
• useBootstrap (boolean): Applies Bootstrap CSS classes to toolbar buttons. Default is false.
• bootstrapVersion (number): Bootstrap major version to target. Accepts 4 or 5. Default is 5.
• toolbarButtonClass (string): CSS classes applied to toolbar buttons when useBootstrap is true. Default is 'btn btn-sm btn-light'.
• useFontAwesome (boolean): Uses FontAwesome icons when FA is detected on the page. Default is true.
• fontAwesomeClass (string): FontAwesome prefix class. Use 'fas' for FA 5 or 'fa-solid' for FA 6.
• pasteAsPlainText (boolean): Strips all formatting on paste. Default is false.
• pasteCleanHTML (boolean): Sanitizes HTML on paste. Default is true.
• pasteStripAttributes (boolean): Strips class, style, and data-* attributes from pasted HTML. Default is false.
• markdownPaste (boolean): Converts pasted Markdown shortcuts to HTML as you type. Default is true.
• allowImageUpload (boolean): Allows drag, paste, and file upload in the image dialog. Default is true.
• maxImageSize (number): Maximum image file size in megabytes. Default is 5.
• tabSize (number): Number of spaces inserted when Tab is pressed. Default is 4.
• historyLimit (number): Maximum undo steps to retain in memory. Default is 100.
• defaultFontFamily (string): Font shown by default in the font-family dropdown. Default is 'Arial'.defaultFontSize (string): Default font size applied to new content. Default is '14px'.
• fontFamilies (string[]): Font families listed in the font-family dropdown. Defaults to 10 preset families.
• stickyToolbar (boolean): Pins the toolbar to the viewport top when the page scrolls. Default is false.
• stickyToolbarOffset (number): Top offset in pixels for the sticky toolbar. Set this to the height of any fixed navigation bar on the page.
• theme (string): Color theme. Accepts 'light' (default) or 'dark'.
• readOnly (boolean): Starts the editor in non-editable mode with the toolbar hidden. Default is false.
• spellcheck (boolean): Enables browser spellcheck in the editable area. Default is true.
• direction (string): Text direction. Accepts 'ltr' (default) or 'rtl'.
• autoSave (boolean): Persists content to localStorage on every change. Default is false.
• autoSaveKey (string): localStorage key used when autoSave is enabled. Default is 'autumnnote-autosave'.
• maxChars (number): Maximum character count. 0 means unlimited. A warning appears in the status bar when the limit is reached.
• maxWords (number): Maximum word count. 0 means unlimited. A warning appears in the status bar when the limit is reached.
• tableHeaderRow (boolean): Inserts a <thead> header row when creating a new table. Default is false.
• codeHighlight (boolean): Auto-loads Prism.js for syntax highlighting inside code blocks. Default is true.
• codeHighlightCDN (string): Base CDN URL for Prism assets. Defaults to cdnjs Prism 1.29.0.
• colorSwatches (string[]): Custom brand color swatches prepended to the color picker palette. Default is an empty array.
• focusColor (string): Custom focus ring color (any valid CSS color string). Overrides the default blue.
• lang (string | object): UI language. Built-in locale codes: 'en', 'vi', 'ja', 'zh', 'fr', 'de', 'es', 'ko'. Pass a partial locale object to override individual strings.
• onChange (Function): (html: string) => void — called on every content change.
• onFocus (Function): (context) => void — called when the editor gains focus.
• onBlur (Function): (context) => void — called when the editor loses focus.
• onInit (Function): (context) => void — called once after the editor fully initializes.
• onImageUpload (Function): (files: FileList) => void — custom upload handler. Overrides the default base64 embed.
• onImageError (Function): ({ file, message }) => void — called when an image is rejected (for example, when it exceeds maxImageSize).
• onPaste (Function): ({ text, html }) => void — called after every paste event.
• onSelectionChange (Function): (context) => void — called when the cursor or selection changes.
• onDestroy (Function): (context) => void — called just before the editor is destroyed.
• onCharLimitReached (Function): (context) => void — called when the maxChars limit is reached.
• onWordLimitReached (Function): (context) => void — called when the maxWords limit is reached.

8. API methods.

// Create one or more editor instances
// selector accepts a CSS string, Element, NodeList, or Element[]
// Returns a Context (single element) or Context[] (multiple)
const editor = AutumnNote.create('#article-editor', options);

// Destroy one or more editor instances and restore the original DOM element
AutumnNote.destroy('#article-editor');

// Retrieve the Context instance for a given element
// Returns null if no editor instance exists on that element
const instance = AutumnNote.getInstance('#article-editor');

// Mutate the global defaults object before calling create()
// All subsequent create() calls inherit these values
AutumnNote.defaults.theme = 'dark';
AutumnNote.defaults.height = 450;

// Return the current sanitized HTML content as a string
// Zero-width spaces from the icon picker are stripped automatically
const html = editor.getHTML();

// Set the editor's HTML content
// All input passes through the DOM-based sanitizer before rendering
editor.setHTML('<p>Replaced content.</p>');

// Return the current content as plain text with no markup
const plainText = editor.getText();

// Clear all content and reset the editor to an empty paragraph
editor.clear();

// Disable the editor and toolbar at runtime
editor.setDisabled(true);

// Re-enable a previously disabled editor and toolbar
editor.setDisabled(false);

// Remove the editor, dispose all internal modules, and restore the original element
editor.destroy();

// Subscribe to a named editor event; returns an unsubscribe function
const unsubscribe = editor.on('change', handler);

// Remove a previously registered event listener
editor.off('change', handler);

// Call any registered module method by its dot-separated name
editor.invoke('toolbar.setActive', 'bold');

9. Events.

// Fires after every content mutation (debounced internally)
editor.on('change', (html) => {
  console.log('Content updated:', html);
});

// Fires when the editor gains focus
editor.on('focus', (context) => {
  console.log('Editor focused');
});

// Fires when the editor loses focus
editor.on('blur', (context) => {
  console.log('Editor blurred');
});

// Fires once after the editor has fully initialized
editor.on('init', (context) => {
  console.log('Editor ready');
});

// Fires when images are dropped or pasted, provided onImageUpload is set
editor.on('imageUpload', (files) => {
  console.log('Files queued for upload:', files);
});

// Fires when an image is rejected, for example when it exceeds maxImageSize
editor.on('imageError', ({ file, message }) => {
  console.warn(`Upload rejected — ${message}`, file);
});

// Fires after every paste event, delivering both plain text and raw HTML payloads
editor.on('paste', ({ text, html }) => {
  console.log('Pasted plain text:', text);
});

// Fires whenever the cursor position or text selection changes
editor.on('selectionChange', (context) => {
  console.log('Selection changed');
});

// Fires just before the editor is torn down
editor.on('destroy', (context) => {
  console.log('Editor shutting down');
});

// Fires when maxChars is reached; use this to display a UI warning
editor.on('charLimitReached', (context) => {
  console.warn('Character limit reached');
});

// Fires when maxWords is reached; use this to lock submission
editor.on('wordLimitReached', (context) => {
  console.warn('Word count limit reached');
});

FAQs:

Q: Does Autumn Note support server-side image uploads?
A: Yes. Pass a function to the onImageUpload option. The editor passes the selected file list to that function, and you handle the upload logic. Call editor.insertImage(url, altText) with the server-returned URL to complete the insertion.

Q: Can I run multiple editor instances on the same page?
A: Yes. Each instance maintains an independent state, and you can assign a different language, theme, and toolbar configuration to each one.

Q: How do I retrieve the editor content for form submission?
A: Call editor.getHTML() immediately before submitting. It returns the current sanitized HTML string. Assign that value to a hidden input field or include it in your fetch payload.

Q: The toolbar wraps onto multiple rows on narrow screens. How do I fix this?
A: Set toolbarOverflow: 'scroll' in your options. This keeps all buttons on a single horizontally scrollable row.

The post Full-featured WYSIWYG HTML Editor With Image Upload – Autumn Note appeared first on CSS Script.