@elia-ori/editor 0.1.23 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -2
- package/dist/index.cjs +9 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +5 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +9 -3
- package/dist/index.js.map +1 -1
- package/dist/styles/editor.css +17 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -45,16 +45,39 @@ function MyEditor() {
|
|
|
45
45
|
}
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
+
### 儲存格式
|
|
49
|
+
|
|
50
|
+
編輯器支援 HTML 和 JSON 兩種格式：
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
// 儲存為 JSON 格式（推薦）
|
|
54
|
+
<EliaEditor
|
|
55
|
+
content={content}
|
|
56
|
+
onChange={(html, json) => {
|
|
57
|
+
setContent(json) // 儲存 JSON，支援多平台渲染
|
|
58
|
+
}}
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
// 儲存為 HTML 格式（向後相容）
|
|
62
|
+
<EliaEditor
|
|
63
|
+
content={content}
|
|
64
|
+
onChange={(html) => {
|
|
65
|
+
setContent(html) // 只用第一個參數
|
|
66
|
+
}}
|
|
67
|
+
/>
|
|
68
|
+
```
|
|
69
|
+
|
|
48
70
|
## Props
|
|
49
71
|
|
|
50
72
|
| Prop | 類型 | 預設值 | 說明 |
|
|
51
73
|
|------|------|--------|------|
|
|
52
74
|
| `content` | `string` | `''` | HTML 內容 |
|
|
53
|
-
| `onChange` | `(html: string) => void` | - |
|
|
75
|
+
| `onChange` | `(html: string, json: JSONContent) => void` | - | 內容變更時的回調，同時提供 HTML 和 JSON 格式 |
|
|
54
76
|
| `placeholder` | `string` | `'開始寫作...'` | 佔位文字 |
|
|
55
77
|
| `toolbar` | `ToolbarItem[]` | 全部 | 工具列項目 |
|
|
56
78
|
| `onImageUpload` | `UploadFunction` | - | **必要** - 圖片上傳函數 |
|
|
57
79
|
| `embedded` | `boolean` | `false` | 嵌入模式（高度由父容器決定） |
|
|
80
|
+
| `card` | `boolean` | `false` | 卡片樣式（邊框 + 圓角 + 陰影） |
|
|
58
81
|
| `className` | `string` | - | 外層 class |
|
|
59
82
|
| `editorClassName` | `string` | - | 編輯器 class |
|
|
60
83
|
| `autofocus` | `boolean` | `false` | 自動聚焦 |
|
|
@@ -133,7 +156,8 @@ const handleImageUpload = async (file, onProgress) => {
|
|
|
133
156
|
```tsx
|
|
134
157
|
<EliaEditor
|
|
135
158
|
embedded
|
|
136
|
-
|
|
159
|
+
card
|
|
160
|
+
className="min-h-96"
|
|
137
161
|
// ...
|
|
138
162
|
/>
|
|
139
163
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -6190,7 +6190,8 @@ function EliaEditor({
|
|
|
6190
6190
|
embedded = false,
|
|
6191
6191
|
autoHeight = false,
|
|
6192
6192
|
bottomOffset = 24,
|
|
6193
|
-
minHeight = 200
|
|
6193
|
+
minHeight = 200,
|
|
6194
|
+
card = false
|
|
6194
6195
|
}) {
|
|
6195
6196
|
const isMobile = useIsBreakpoint();
|
|
6196
6197
|
const { height } = useWindowSize();
|
|
@@ -6209,7 +6210,7 @@ function EliaEditor({
|
|
|
6209
6210
|
const handleUpdate = (0, import_react86.useCallback)(
|
|
6210
6211
|
({ editor: editor2 }) => {
|
|
6211
6212
|
isInternalUpdate.current = true;
|
|
6212
|
-
onChange?.(editor2.getHTML());
|
|
6213
|
+
onChange?.(editor2.getHTML(), editor2.getJSON());
|
|
6213
6214
|
},
|
|
6214
6215
|
[onChange]
|
|
6215
6216
|
);
|
|
@@ -6294,7 +6295,12 @@ function EliaEditor({
|
|
|
6294
6295
|
"div",
|
|
6295
6296
|
{
|
|
6296
6297
|
ref: containerRef,
|
|
6297
|
-
className: cn(
|
|
6298
|
+
className: cn(
|
|
6299
|
+
"simple-editor-wrapper",
|
|
6300
|
+
embedded && "simple-editor-embedded",
|
|
6301
|
+
card && "simple-editor-card",
|
|
6302
|
+
className
|
|
6303
|
+
),
|
|
6298
6304
|
style: computedHeight ? { height: computedHeight } : void 0,
|
|
6299
6305
|
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react87.EditorContext.Provider, { value: { editor }, children: [
|
|
6300
6306
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|