sceditor-react

React wrapper for SCEditor — a lightweight BBCode and XHTML WYSIWYG editor.

Install

npm install sceditor-react

Usage

Basic (controlled)

import { useState } from 'react';
import { SCEditor } from 'sceditor-react';

function App() {
  const [value, setValue] = useState('[b]Hello[/b] world!');

  return (
    <SCEditor
      format="bbcode"
      value={value}
      onChange={setValue}
      height={300}
    />
  );
}

Uncontrolled

import { useRef } from 'react';
import { SCEditor, SCEditorInstance } from 'sceditor-react';

function App() {
  const editorRef = useRef<SCEditorInstance>(null);

  return (
    <SCEditor
      ref={editorRef}
      format="bbcode"
      defaultValue="[b]Hello[/b]"
      onReady={(instance) => {
        console.log('Editor ready!', instance);
      }}
    />
  );
}

Hook (imperative)

import { useSCEditor } from 'sceditor-react';

function App() {
  const { textareaRef, instance, loading } = useSCEditor({
    format: 'bbcode',
    theme: 'modern',
  });

  return (
    <div>
      <textarea ref={textareaRef} defaultValue="[b]Hello[/b]" />
      <button onClick={() => instance?.insertText('[b]Bold[/b]')}>
        Insert Bold
      </button>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | format | 'bbcode' \| 'xhtml' | 'bbcode' | Editor format | | value | string | — | Controlled value | | defaultValue | string | '' | Initial value (uncontrolled) | | onChange | (value: string) => void | — | Change handler | | icons | 'monocons' \| 'material' | 'monocons' | Icon set | | theme | string | 'default' | Theme name | | toolbar | string | — | Toolbar button config | | width | number \| string | '100%' | Editor width | | height | number \| string | 300 | Editor height | | readOnly | boolean | false | Read-only mode | | autoFocus | boolean | false | Auto-focus on mount | | options | SCEditorOptions | — | Additional SCEditor options | | basePath | string | unpkg CDN | Base URL for SCEditor assets | | version | string | '3.2.1' | SCEditor version (CDN only) | | onReady | (instance) => void | — | Called when editor is ready | | onError | (error) => void | — | Called on load failure |

Self-hosting

By default, SCEditor assets are loaded from the unpkg CDN. To self-host:

<SCEditor
  basePath="/static/sceditor"
  format="bbcode"
  value={value}
  onChange={setValue}
/>

Make sure the directory contains the sceditor minified/ folder structure.

License

MIT