如何使用 Novel
安裝 Novel: 在您的項目中安裝 Novel,方法是運行 'npm i novel' 在您的終端中。
設置環境變量: 設置所需的環境變量:OPENAI_API_KEY 用於 OpenAI 集成,BLOB_READ_WRITE_TOKEN 用於 Vercel Blob 訪問。
導入 Novel 組件: 在您的 React 代碼中導入必要的 Novel 組件,例如 EditorContent 和 EditorRoot。
創建編輯器組件: 創建一個使用 Novel 編輯器的組件,將 EditorContent 包裝在 EditorRoot 內。
配置初始內容: 使用 EditorContent 上的 initialContent 屬性設置編輯器的初始內容。
處理內容更新: 使用 EditorContent 上的 onUpdate 屬性處理編輯器內容的更改。
自定義外觀: 使用 Tailwind CSS 類或您喜歡的樣式方法自定義編輯器的外觀。
實現 AI 功能: 通過配置 OpenAI 集成來利用 AI 驅動的自動完成功能。
添加額外功能: 根據您的項目需求實現額外功能,如圖像上傳或協作編輯。
測試和完善: 徹底測試編輯器,並根據您的具體要求完善其功能和外觀。
Novel 常見問題
Novel 是一個 Notion 風格的 WYSIWYG(所見即所得)編輯器,具有 AI 驅動的自動完成功能。它基於 Tiptap、OpenAI 和 Vercel AI SDK 構建。
查看更多