SunEditor for React

Install

このコンポーネントにはSunEditorエンジンも必要です（ピア依存関係、バージョン3.4.1以降）。

npm install suneditor @suneditor/suneditor-react

Usage

import SunEditor from '@suneditor/suneditor-react';
import 'suneditor/css/editor';
import 'suneditor/css/contents';

export default function App() {
  return (
    <SunEditor
      options={(se) => ({
        plugins: [se.plugins.link, se.plugins.image, se.plugins.table],
        buttonList: [
          ['undo', 'redo'],
          ['bold', 'italic', 'underline'],
          ['table', 'link', 'image'],
        ],
        height: '400px',
      })}
    />
  );
}

options はそのまま suneditor.create() に渡されるため、すべてのオプション、プラグイン、ボタン、イベント、言語はエンジン独自のものになります。
このREADMEでは、Reactコンポーネントが追加する機能のみを説明しています。オプション自体については、SunEditor ドキュメントまたはsuneditorパッケージを参照してください。

options は遅延ロードされた suneditor モジュール (se.plugins、se.langs、se.interfaces、...) を受け取ります。
Next.js ではこの形式を推奨します。クライアント コンポーネントで suneditor を静的にインポートすると、エンジンがインポート時に window にアクセスするため、サーバー レンダリングが壊れます。
サーバーレンダリングを行わない場合や、エンジンのインポートを必要としないオプションの場合は、プレーンオブジェクトでも問題ありません。
言語パックはプレーンオブジェクトであり、常に静的にインポートできます: import ko from 'suneditor/langs/ko'。

制御値

const [html, setHtml] = useState('<p>Hello</p>');

<SunEditor value={html} onChange={setHtml} options={...} />

value を最後の onChange の結果以外のものに変更すると、エディタの内容が置き換えられます。 非制御エディタの場合はvalueを省略し、必要なときにインスタンスからコンテンツを読み取ってください。

インスタンスアクセス

const ref = useRef<SunEditorInstance | null>(null);

<SunEditor ref={ref} options={...} />

ref.current?.$.html.get();
ref.current?.$.html.set('<p>new</p>');
ref.current?.resetOptions({ height: '600px' });

ref は suneditor.create() によって返されるオブジェクトなので、エンジンの API 全体が利用可能です。

Events

ハンドラをoptions.eventsに渡します。レンダリングのたびに再同期されるため、React状態を安全に閉じることができます。

<SunEditor
	options={(se) => ({
		plugins: [se.plugins.image],
		events: {
			onSave: async () => { await save(html); return true; },
			onImageUploadBefore: ({ info, handler }) => { ... },
		},
	})}
/>

別の要素内のツールバーまたはステータスバー

DOM要素を受け取るエンジンオプションは、options関数がマウント後に実行されるため、refsでも機能します。

const toolbarRef = useRef<HTMLDivElement>(null);

<div ref={toolbarRef} />
<SunEditor options={(se) => ({ plugins: [se.plugins.link], toolbar_container: toolbarRef.current })} />

Multi-root

1つのエンジンインスタンス（ツールバー、プラグイン、イベント、テーマ）に、複数の編集可能な領域があります。各領域ごとに<SunEditorGroup>の中に<SunEditorRoot>を配置し、その間に他のJSXを配置します。このグループは独自の要素をレンダリングしません。

const toolbarRef = useRef<HTMLDivElement>(null);

<SunEditorGroup options={(se) => ({ plugins: [se.plugins.link], toolbar_container: toolbarRef.current })}>
  <div ref={toolbarRef} />
  <h2>Title</h2>
  <SunEditorRoot name='header' value={header} onChange={setHeader} options={{ height: '80px' }} />
  <SunEditorRoot name='body' value={body} onChange={setBody} readOnly={locked} />
</SunEditorGroup>;

• nameはエンジンrootKey（ref.current.changeFrameContext('body')、html.get({ rootKey: 'body' })）です。
• 各ルートには、独自の value / onChange、readOnly、disabled とフレーム options (height、placeholder、iframe、...) があります。
• modeがinlineまたはballoonでない限り、エンジンは共有ツールバーにtoolbar_containerを必要とします。
• ルートはグループがマウントされるときに収集されます。エンジンは後からルートを追加または削除できないため、グループのkeyを変更して、異なるルートでグループを再作成してください。

Props

eventsとtheme以外のオプションは、エディタの作成時に適用されます。 後で変更するには、別のkeyで再マウントするか、ref.current.resetOptions()を呼び出します。

Types

import type {
  SunEditorProps,
  SunEditorGroupProps,
  SunEditorRootProps,
  SunEditorInstance,
  SunEditorOptions,
  SunEditorFrameOptions,
  SunEditorEvents,
} from '@suneditor/suneditor-react';

すべてのエンジンタイプはsuneditor/typesから利用可能です。

Next.js ノート

• このコンポーネントはクライアントモジュール（ビルド出力には"use client"が含まれます）であり、ブラウザでのみエンジンをロードするため、サーバーコンポーネントから直接レンダリングできます。
• クライアントコンポーネントの静的インポートにはsuneditorを含めないでください。se.pluginsにアクセスするにはoptions={(se) => ...}形式を使用してください。
• CSS インポート (suneditor/css/editor、suneditor/css/contents、suneditor/src/themes/*.css) は、App Router と Pages Router の両方で機能します。