Lexical Text Editor

一個基於 Lexical 的輕量級 React 富文本編輯器套件。

⚠️ 開發中警告 此專案目前仍在積極開發中，API 可能會有變動，不建議用於正式環境。

安裝

npm install @open-egretta/lexical-text-editor

使用方式

基本使用

import { LexicalEditor } from "@open-egretta/lexical-text-editor";
import type { LexicalEditorRef } from "@open-egretta/lexical-text-editor";
import { useRef } from "react";

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

  const handleSave = () => {
    if (editorRef.current) {
      const json = editorRef.current.getJSON();
      const text = editorRef.current.getText();
      console.log("JSON 格式:", json);
      console.log("純文字:", text);
    }
  };

  return (
    <div>
      <LexicalEditor ref={editorRef} placeholder="開始輸入..." />
      <button onClick={handleSave}>儲存內容</button>
    </div>
  );
}

載入已儲存的內容

import { LexicalEditor } from "@open-egretta/lexical-text-editor";

function App() {
  const savedContent = '{"root":{"children":[...]}}'; // 之前儲存的 JSON

  return <LexicalEditor initialContent={savedContent} />;
}

Props

| 參數 | 類型 | 預設值 | 說明 | | ---------------- | ---------- | --------------- | ----------------------------- | | placeholder | string | '開始輸入...' | 編輯器佔位文字 | | initialContent | string | - | 初始內容 (JSON 格式) | | customIcons | IconSet | - | 自訂工具列圖示 | | ref | React.Ref| - | 用於存取編輯器方法的 ref 物件 |

Ref 方法

透過 ref 可以存取以下方法:

| 方法 | 回傳值 | 說明 | | ------------------------- | -------- | ---------------------------- | | getJSON() | string | 取得編輯器內容的 JSON 字串 | | getText() | string | 取得編輯器的純文字內容 | | setContent(json: string)| void | 設定編輯器內容 (JSON 格式) |

開發

# 安裝依賴
npm install

# 打包套件
npm run build

# 執行範例
npm run dev:example

License

MIT