Registry / web-framework / suneditor-react

suneditor-react

JSON →
library3.6.1jsnpmunverified

suneditor-react provides a convenient React wrapper for the SunEditor WYSIWYG HTML editor. It simplifies integrating a rich text editor into React applications by encapsulating the underlying SunEditor library within a standard React component interface. The current stable version is 3.6.1, and the project appears to have an active release cadence with regular updates addressing bug fixes, performance improvements, and new features. A key differentiator is its explicit support for Next.js via dynamic imports to handle server-side rendering (SSR) compatibility. It also offers fine-grained control over editor configuration, including language settings, form name integration, and the ability to load only necessary plugins for performance optimization, differentiating it from simpler wrappers that might bundle all features by default. It requires the base `suneditor` package as a peer dependency, giving users control over its version.

web-framework
github ↗package ↗
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

Primarily designed for ESM imports in modern React applications. CommonJS 'require' might lead to bundling issues or incorrect module resolution, especially in build environments expecting ESM.

import SunEditor from 'suneditor-react';

The core SunEditor CSS must be imported manually to style the editor. Forgetting this will result in an unstyled, broken-looking editor.

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

When using Next.js or other SSR frameworks, SunEditor must be dynamically imported with `ssr: false` to prevent 'document is not defined' errors during server-side rendering, as the editor relies on browser APIs.

import dynamic from 'next/dynamic'; const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });

For TypeScript users who need to type the underlying SunEditor instance (e.g., when using `getSunEditorInstance` with `useRef`), import `SunEditorCore` directly from the `suneditor` package for accurate type hints.

import SunEditorCore from 'suneditor/src/lib/core';

This example demonstrates how to integrate `suneditor-react` into a Next.js application using dynamic imports, access the underlying SunEditor instance via a ref, set initial content, and handle content changes.

import React from 'react'; import dynamic from 'next/dynamic'; import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File // Important: Dynamic import for Next.js to disable SSR const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false, }); const MyRichTextEditor = () => { const editorRef = React.useRef(); // The sunEditor parameter will be set to the core suneditor instance const getEditorInstance = (sunEditor) => { editorRef.current = sunEditor; if (editorRef.current) { console.log('SunEditor instance ready:', editorRef.current); // Example: Set initial content programmatically // editorRef.current.setContents('<p>Hello from <b>suneditor-react</b>!</p>'); } }; const handleEditorChange = (content) => { console.log('Editor content changed:', content); }; return ( <div> <h1>My Blog Post Editor</h1> <SunEditor getSunEditorInstance={getEditorInstance} onChange={handleEditorChange} setOptions={{ height: '200px', buttonList: [['undo', 'redo'], ['font', 'fontSize', 'formatBlock'], ['bold', 'underline', 'italic', 'strike'], ['align', 'list'], ['image', 'link']], lang: 'en' // Example language setting }} defaultValue="<p>Start typing your content here...</p>" /> <button onClick={() => console.log('Current content:', editorRef.current?.getContents())}> Log Current Content </button> </div> ); }; export default MyRichTextEditor;
Debug
Known footguns
breakingThe order of parameters for `onImageUploadBefore`, `onVideoUploadBefore`, and `onAudioUploadBefore` event handlers was fixed.
gotchaThe `suneditor` core package is a peer dependency and must be installed separately alongside `suneditor-react`.
gotchaWhen using Server-Side Rendering (SSR) frameworks like Next.js, importing `SunEditor` directly will cause 'document is not defined' errors during build or server-side execution.
gotchaAccessing the underlying SunEditor instance (the 'core' object) directly from event callbacks is not supported by `suneditor-react`. You need to use the `getSunEditorInstance` prop.
gotchaFor optimal performance, especially with many plugins, it's recommended to load only the plugins you need.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
0 hits · last 30 days

No traffic data recorded yet.

Resources
githubhttps://github.com/mkhstar/suneditor-react ↗
packagehttps://www.npmjs.com/package/suneditor-react ↗