{"id":15844,"library":"suneditor","title":"SunEditor","description":"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.","status":"active","version":"3.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/JiHong88/SunEditor","tags":["javascript","suneditor","wysiwyg","wysiwyg editor","wysiwyg html editor","rich text","rich text editor","rich editor","html editor","typescript"],"install":[{"cmd":"npm install suneditor","lang":"bash","label":"npm"},{"cmd":"yarn add suneditor","lang":"bash","label":"yarn"},{"cmd":"pnpm add suneditor","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main editor factory function is typically imported as a default export. CommonJS `require` is not supported in v3 and above.","wrong":"const suneditor = require('suneditor');","symbol":"suneditor","correct":"import suneditor from 'suneditor';"},{"note":"The core stylesheet must be imported separately. Ensure your build system (e.g., Webpack, Vite) is configured to handle CSS imports.","wrong":"require('suneditor/dist/css/suneditor.min.css');","symbol":"suneditor.min.css","correct":"import 'suneditor/dist/css/suneditor.min.css';"},{"note":"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.","wrong":"import { image } from 'suneditor/src/plugins/image';","symbol":"plugins","correct":"import plugins from 'suneditor/src/plugins';"},{"note":"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`.","wrong":"import { en } from 'suneditor/src/lang/en';","symbol":"lang/en","correct":"import lang from 'suneditor/src/lang';"}],"quickstart":{"code":"import suneditor from 'suneditor';\nimport plugins from 'suneditor/src/plugins';\nimport lang from 'suneditor/src/lang';\nimport 'suneditor/dist/css/suneditor.min.css';\n\n// Simulate a textarea element in the DOM\ndocument.body.innerHTML = '<textarea id=\"myEditor\" style=\"height: 300px;\"></textarea>';\n\nconst editor = suneditor.create('myEditor', {\n  plugins: plugins,\n  lang: lang.en,\n  height: 'auto',\n  minHeight: '200px',\n  buttonList: [\n    ['undo', 'redo'],\n    ['font', 'fontSize', 'formatBlock'],\n    ['paragraphStyle', 'blockquote'],\n    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],\n    ['fontColor', 'hiliteColor', 'textStyle'],\n    ['removeFormat'],\n    ['outdent', 'indent'],\n    ['align', 'horizontalRule', 'list', 'table'],\n    ['link', 'image', 'video'],\n    ['fullScreen', 'showBlocks', 'codeView'],\n    ['preview', 'print'],\n    ['save']\n  ]\n});\n\nconsole.log('SunEditor initialized:', editor);","lang":"typescript","description":"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."},"warnings":[{"fix":"Review the official SunEditor v3 documentation and migration guides. Re-evaluate plugin imports and initialization logic. Dropped support for Internet Explorer in v3.","message":"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.","severity":"breaking","affected_versions":">=3.0.2"},{"fix":"If using the mention functionality, update your editor configuration to use the `autocomplete` option and its `triggers` object for per-trigger settings.","message":"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.","severity":"breaking","affected_versions":">=3.1.0"},{"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.","message":"SunEditor v3 and above no longer supports CommonJS `require()` syntax. It is designed for modern JavaScript environments using ES Modules (ESM).","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"security","affected_versions":"<3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you are using ES module imports: `import suneditor from 'suneditor';`. If using TypeScript, check `tsconfig.json` for `moduleResolution` settings.","cause":"Attempting to use `suneditor` as a function or constructor after importing it via CommonJS `require`, or an incorrect ES module import.","error":"TypeError: suneditor is not a function"},{"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()`.","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.","error":"Uncaught TypeError: Cannot read properties of null (reading 'style')"},{"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.","cause":"The core CSS stylesheet for SunEditor is not being correctly loaded or processed by your build system.","error":"Error: `suneditor/dist/css/suneditor.min.css` not found or cannot be loaded."},{"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.","cause":"Using an outdated version of SunEditor, specifically any version prior to 2.47.10, which contained a critical XSS vulnerability.","error":"Content sanitization issues / XSS vulnerabilities reported by security scanners."}],"ecosystem":"npm"}