@ablogcms/wysiwyg-editor

Trumbowyg ベースの WYSIWYG エディタを提供するパッケージ。ローダー（trumbowyg 本体・プラグイン・ CSS・日本語ロケールの読み込み）と、React から使うための WysiwygEditor コンポーネントをセットで 収容する。@ablogcms/lib/wysiwyg（ローダー）と @ablogcms/components/wysiwyg-editor （コンポーネント）から切り出したもの。

利用契約

jQuery はグローバル前提（webpack の externals: { jquery: 'jQuery' } と同じ設計）で、 このパッケージ自体は jquery/trumbowyg をランタイム依存として dependencies に含めない （trumbowyg は型宣言と CSS/プラグインのロードパスのためだけに参照する）。

使い方

import { WysiwygEditor } from '@ablogcms/wysiwyg-editor/wysiwyg-editor';

<WysiwygEditor value={html} onChange={setHtml} />;

素の trumbowyg ローダーを直接呼びたい場合（動的 import での遅延ロード等）は次を使う。

const { default: initWysiwyg } = await import('@ablogcms/wysiwyg-editor/wysiwyg');
initWysiwyg(textarea, config);

CSS import・jQuery プラグイン登録を伴う副作用パッケージのため、ルートバレル（.）は公開しない。