suneditor

library3.1.2jsnpmunverified

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.

web-framework serialization

npm install suneditor

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SUNEDITOR

suneditor

web-frameworkjavascriptv3.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

suneditor

✓ import suneditor from 'suneditor';

✗ const suneditor = require('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

✓ import 'suneditor/dist/css/suneditor.min.css';

✗ require('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

✓ import plugins from 'suneditor/src/plugins';

✗ import { image } from 'suneditor/src/plugins/image';

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

✓ import lang from 'suneditor/src/lang';

✗ import { en } from 'suneditor/src/lang/en';

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`.

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);

Debug

Known issues

breakingVersion 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.

affects: >=3.0.2

breakingIn 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.

affects: >=3.1.0

breakingSunEditor 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.

affects: >=3.0.0

breakingSunEditor 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.

affects: >=3.0.0

securityVersion 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.

affects: <3.0.0

gotchaSunEditor 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.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: suneditor is not a function

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')

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.

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.

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.

Upgrade

Version history

3.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

Resources

githubhttps://github.com/JiHong88/SunEditor ↗

packagehttps://www.npmjs.com/package/suneditor ↗

homepagehttps://suneditor.com ↗