Novelの使用方法
Novelをインストール: ターミナルで'npm i novel'を実行して、プロジェクトにNovelをインストールします。
環境変数を設定: OpenAI統合のためのOPENAI_API_KEYとVercel BlobアクセスのためのBLOB_READ_WRITE_TOKENという必要な環境変数を設定します。
Novelコンポーネントをインポート: Reactコード内でEditorContentやEditorRootなどの必要なNovelコンポーネントをインポートします。
エディタコンポーネントを作成: EditorRoot内にEditorContentをラップしたNovelエディタを使用するコンポーネントを作成します。
初期コンテンツを設定: EditorContentのinitialContentプロパティを使用して、エディタの初期コンテンツを設定します。
コンテンツの更新を処理: EditorContentのonUpdateプロパティを使用して、エディタコンテンツの変更を処理します。
外観をカスタマイズ: Tailwind CSSクラスや好みのスタイリング方法を使用して、エディタの外観をカスタマイズします。
AI機能を実装: OpenAI統合を設定することで、AI駆動のオートコンプリート機能を利用します。
追加機能を追加: プロジェクトに必要な画像アップロードや共同編集などの追加機能を実装します。
テストと改善: エディタを徹底的にテストし、特定の要件に基づいて機能と外観を改善します。
Novelのよくある質問
ノベルは、AIによるオートコンプリート機能を備えたNotionスタイルのWYSIWYG(見たまま編集)エディタです。Tiptap、OpenAI、Vercel AI SDKを使用して構築されています。
もっと見る