SunEditor

3.1.2 · active · verified Tue Apr 21

SunEditor is a lightweight, fast, and extensible WYSIWYG (What You See Is What You Get) web editor built entirely with vanilla JavaScript. It is designed for creating structured content such as articles, documentation, and emails, focusing on consistency and content validation. The current stable version is 3.1.2, with the project actively maintained and receiving regular bug fixes and enhancements. A major rewrite in version 3.0.2 completely revamped the codebase, introduced a modular plugin system, and dropped support for Internet Explorer. SunEditor boasts no external dependencies, offers a responsive user interface, and is easily integrated into modern web application frameworks like React, Vue, and Svelte. Its rich plugin ecosystem includes features like advanced table editing, LaTeX support, drawing tools, code blocks with language selectors, Markdown view mode, and built-in media galleries. It distinguishes itself by providing a robust, highly customizable editing experience without the overhead of external libraries.

Common errors

```
TypeError: suneditor is not a function
```
cause Attempting to use `suneditor` as a function or constructor after importing it via CommonJS `require`, or an incorrect ES module import.

fix Ensure you are using ES module imports: `import suneditor from 'suneditor';`. If using TypeScript, check `tsconfig.json` for `moduleResolution` settings.
```
Uncaught TypeError: Cannot read properties of null (reading 'style')
```
cause This often occurs when a plugin necessary for a specific editor feature (e.g., fullscreen, code view) is not included in the `plugins` option during initialization.

fix Verify that all plugins corresponding to the features you intend to use are imported from `suneditor/src/plugins` and correctly passed in the `plugins` array when calling `suneditor.create()`.
```
Error: `suneditor/dist/css/suneditor.min.css` not found or cannot be loaded.
```
cause The core CSS stylesheet for SunEditor is not being correctly loaded or processed by your build system.

fix Add `import 'suneditor/dist/css/suneditor.min.css';` to your entry point. Ensure your build tool (e.g., Webpack, Vite, Parcel) has appropriate loaders (e.g., `style-loader`, `css-loader`) configured to handle CSS imports.
```
Content sanitization issues / XSS vulnerabilities reported by security scanners.
```
cause Using an outdated version of SunEditor, specifically any version prior to 2.47.10, which contained a critical XSS vulnerability.

fix Upgrade SunEditor to version 2.47.10 (if staying on v2.x) or, preferably, to the latest v3.x release to ensure all known security patches are applied.

Warnings

breaking Version 3.0.2 introduced a complete rewrite of the SunEditor codebase. This includes a new modular plugin system and significant internal structure changes. Any code written for v2.x will likely break and require updates.
Fix: Review the official SunEditor v3 documentation and migration guides. Re-evaluate plugin imports and initialization logic. Dropped support for Internet Explorer in v3.
breaking In version 3.1.0, the `mention` plugin was replaced by a more generic `autocomplete` plugin. The associated option key has been renamed from `mention` to `autocomplete`, and per-trigger settings are now configured via a `triggers` object.
Fix: If using the mention functionality, update your editor configuration to use the `autocomplete` option and its `triggers` object for per-trigger settings.
breaking SunEditor v3 and above no longer supports CommonJS `require()` syntax. It is designed for modern JavaScript environments using ES Modules (ESM).
Fix: Update your import statements to use ES module syntax (e.g., `import suneditor from 'suneditor';`). Ensure your project's build setup (Webpack, Rollup, Vite, etc.) is configured to transpile or handle ESM.
breaking SunEditor officially supports modern browser versions only (e.g., Chrome 119+, Edge 119+, Firefox 121+, Safari 17+). Older browser versions are not supported out-of-the-box and may require custom polyfills.
Fix: Ensure your target audience uses supported browser versions, or include necessary polyfills if broader compatibility is required. Consult browser compatibility tables for specific APIs.
security Version 2.47.10 includes a critical security patch addressing an XSS vulnerability where the content sanitizer could be bypassed. This could allow stored or reflected XSS attacks.
Fix: It is strongly recommended to upgrade to SunEditor v3.x or at least to v2.47.10 (if still on v2) or newer to mitigate this critical XSS vulnerability. Do not use older versions in production.
gotcha SunEditor plugins are modular and must be explicitly imported and passed to the editor's `plugins` option during initialization. If a plugin for a specific feature (e.g., image, table, code view) is not included, the corresponding functionality will not work, and console errors related to missing functions or null properties may occur.
Fix: Ensure all desired plugins are imported (e.g., `import plugins from 'suneditor/src/plugins';`) and passed correctly to the `suneditor.create()` call, typically within the `plugins` array in the options object.

Install

npm install suneditor npm
yarn add suneditor yarn
pnpm add suneditor pnpm

Imports

suneditor
wrong:
```
const suneditor = require('suneditor');
```
correct:
```
import suneditor from 'suneditor';
```
The main editor factory function is typically imported as a default export. CommonJS `require` is not supported in v3 and above.
suneditor.min.css
wrong:
```
require('suneditor/dist/css/suneditor.min.css');
```
correct:
```
import 'suneditor/dist/css/suneditor.min.css';
```
The core stylesheet must be imported separately. Ensure your build system (e.g., Webpack, Vite) is configured to handle CSS imports.
plugins
wrong:
```
import { image } from 'suneditor/src/plugins/image';
```
correct:
```
import plugins from 'suneditor/src/plugins';
```
Most plugins are exposed as named exports from 'suneditor/src/plugins', which is an object containing all available plugin configurations for selection during editor creation. Direct import of specific plugin files (e.g., `suneditor/src/plugins/image`) is also possible but less common for bundled usage.
lang/en
wrong:
```
import { en } from 'suneditor/src/lang/en';
```
correct:
```
import lang from 'suneditor/src/lang';
```
Language packs are typically imported as a default export from their respective paths (e.g., `suneditor/src/lang/en`) or via `suneditor/src/lang` object, then passed to the editor configuration. For example, `lang: lang.en`.

Quickstart

This example demonstrates how to initialize SunEditor on a textarea element, including core plugins, English language pack, and a common toolbar configuration. It showcases the modular setup of the editor.

import suneditor from 'suneditor';
import plugins from 'suneditor/src/plugins';
import lang from 'suneditor/src/lang';
import 'suneditor/dist/css/suneditor.min.css';

// Simulate a textarea element in the DOM
document.body.innerHTML = '<textarea id="myEditor" style="height: 300px;"></textarea>';

const editor = suneditor.create('myEditor', {
  plugins: plugins,
  lang: lang.en,
  height: 'auto',
  minHeight: '200px',
  buttonList: [
    ['undo', 'redo'],
    ['font', 'fontSize', 'formatBlock'],
    ['paragraphStyle', 'blockquote'],
    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
    ['fontColor', 'hiliteColor', 'textStyle'],
    ['removeFormat'],
    ['outdent', 'indent'],
    ['align', 'horizontalRule', 'list', 'table'],
    ['link', 'image', 'video'],
    ['fullScreen', 'showBlocks', 'codeView'],
    ['preview', 'print'],
    ['save']
  ]
});

console.log('SunEditor initialized:', editor);

view raw JSON →