@sanmokeji/smo-editor 0.0.6 → 0.0.7
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 +33 -23
- package/dist/smo-editor.css +1 -1
- package/dist/smo-editor.d.ts +14 -12
- package/dist/smo-editor.js +15997 -508
- package/dist/smo-editor.umd.cjs +142 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
🚀 **SmoEditor** 是一款基于 Vue 3 和 Tiptap 打造的轻量、高效、开箱即用的富文本编辑器组件。具备完美的 TypeScript 类型支持。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
***
|
|
6
6
|
|
|
7
7
|
## ✨ 特性
|
|
8
8
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
- 🔗 **链接编辑** — 行内链接设置弹窗，自动识别 URL
|
|
14
14
|
- 📐 **文字对齐** — 左对齐 / 居中 / 右对齐
|
|
15
15
|
- 📋 **丰富格式** — 加粗、斜体、删除线、行内代码、代码块、引用、分割线
|
|
16
|
-
- 🔤 **标题层级** — H1
|
|
16
|
+
- 🔤 **标题层级** — H1 \~ H6 完整支持
|
|
17
17
|
- 📝 **列表** — 有序列表、无序列表
|
|
18
18
|
- ↩️ **撤销重做** — 内置历史记录操作
|
|
19
19
|
- 🔌 **可扩展** — 基于 Tiptap 扩展机制，轻松添加自定义节点和标记
|
|
@@ -74,12 +74,13 @@ const html = ref('<p>初始内容</p>')
|
|
|
74
74
|
|
|
75
75
|
### Props
|
|
76
76
|
|
|
77
|
-
| 属性
|
|
78
|
-
| --------------- |
|
|
79
|
-
| `modelValue` | `string`
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
77
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
78
|
+
| --------------- | ----------------------------------------------------------------- | ------ | -------------------- |
|
|
79
|
+
| `modelValue` | `string` | `''` | 编辑器 HTML 内容（v-model） |
|
|
80
|
+
| `editable` | `boolean` | `true` | 是否为可编辑状态 |
|
|
81
|
+
| `placeholder` | `string` | `''` | 占位符文本 |
|
|
82
|
+
| `height` | `string \| number` | — | 编辑器容器高度 |
|
|
83
|
+
| `onImageUpload` | `(file: File) => ImageUploadResult \| Promise<ImageUploadResult>` | — | 图片上传回调 |
|
|
83
84
|
|
|
84
85
|
### 图片上传
|
|
85
86
|
|
|
@@ -91,7 +92,9 @@ const html = ref('<p>初始内容</p>')
|
|
|
91
92
|
</template>
|
|
92
93
|
|
|
93
94
|
<script setup lang="ts">
|
|
94
|
-
|
|
95
|
+
import type { ImageUploadResult } from '@sanmokeji/smo-editor'
|
|
96
|
+
|
|
97
|
+
const uploadImage = async (file: File): Promise<ImageUploadResult> => {
|
|
95
98
|
const formData = new FormData()
|
|
96
99
|
formData.append('file', file)
|
|
97
100
|
|
|
@@ -99,8 +102,8 @@ const uploadImage = async (file: File): Promise<string> => {
|
|
|
99
102
|
method: 'POST',
|
|
100
103
|
body: formData,
|
|
101
104
|
})
|
|
102
|
-
const { url } = await res.json()
|
|
103
|
-
return url
|
|
105
|
+
const { url, alt } = await res.json()
|
|
106
|
+
return { url, alt }
|
|
104
107
|
}
|
|
105
108
|
</script>
|
|
106
109
|
```
|
|
@@ -132,16 +135,23 @@ const uploadImage = async (file: File): Promise<string> => {
|
|
|
132
135
|
库提供完整的 TypeScript 类型声明：
|
|
133
136
|
|
|
134
137
|
```ts
|
|
135
|
-
import { SmoEditor, type SmoEditorOptions } from '@sanmokeji/smo-editor'
|
|
138
|
+
import { SmoEditor, type SmoEditorOptions, type ImageUploadResult } from '@sanmokeji/smo-editor'
|
|
136
139
|
```
|
|
137
140
|
|
|
138
|
-
`SmoEditorOptions` 接口定义：
|
|
141
|
+
`SmoEditorOptions` 和 `ImageUploadResult` 接口定义：
|
|
139
142
|
|
|
140
143
|
```ts
|
|
144
|
+
export interface ImageUploadResult {
|
|
145
|
+
url: string
|
|
146
|
+
alt?: string
|
|
147
|
+
}
|
|
148
|
+
|
|
141
149
|
export interface SmoEditorOptions {
|
|
142
150
|
content?: string | object
|
|
151
|
+
height?: string | number
|
|
152
|
+
editable?: boolean
|
|
143
153
|
placeholder?: string
|
|
144
|
-
onImageUpload?: (file: File) => Promise<
|
|
154
|
+
onImageUpload?: (file: File) => ImageUploadResult | Promise<ImageUploadResult>
|
|
145
155
|
}
|
|
146
156
|
```
|
|
147
157
|
|
|
@@ -161,15 +171,15 @@ CSS 文件中包含 `.smot-editor-` 前缀的类名，不会污染全局样式
|
|
|
161
171
|
内置工具栏提供以下功能：
|
|
162
172
|
|
|
163
173
|
| 分组 | 功能 |
|
|
164
|
-
|
|
|
174
|
+
| -- | -------------------------------- |
|
|
165
175
|
| 标题 | H1 / H2 / H3 / H4 / H5 / H6 / 正文 |
|
|
166
|
-
| 内联 | 加粗 / 斜体 / 删除线 / 行内代码
|
|
167
|
-
| 块级 | 引用 / 代码块 / 分割线
|
|
168
|
-
| 列表 | 有序列表 / 无序列表
|
|
169
|
-
| 对齐 | 左对齐 / 居中 / 右对齐
|
|
170
|
-
| 媒体 | 图片上传（含浮动编辑菜单）
|
|
171
|
-
| 链接 | 设置 / 编辑超链接
|
|
172
|
-
| 历史 | 撤销 / 重做
|
|
176
|
+
| 内联 | 加粗 / 斜体 / 删除线 / 行内代码 |
|
|
177
|
+
| 块级 | 引用 / 代码块 / 分割线 |
|
|
178
|
+
| 列表 | 有序列表 / 无序列表 |
|
|
179
|
+
| 对齐 | 左对齐 / 居中 / 右对齐 |
|
|
180
|
+
| 媒体 | 图片上传（含浮动编辑菜单） |
|
|
181
|
+
| 链接 | 设置 / 编辑超链接 |
|
|
182
|
+
| 历史 | 撤销 / 重做 |
|
|
173
183
|
|
|
174
184
|
## 🔧 开发
|
|
175
185
|
|
|
@@ -191,6 +201,6 @@ pnpm type-check
|
|
|
191
201
|
|
|
192
202
|
MIT
|
|
193
203
|
|
|
194
|
-
|
|
204
|
+
***
|
|
195
205
|
|
|
196
206
|
Made with ❤️ by SanMoKeJi
|
package/dist/smo-editor.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
[data-v-8407b2ea] .ProseMirror-selectednode{border-radius:4px;outline:2px solid #38bdf8}[data-v-8407b2ea] .tiptap:focus,[data-v-8407b2ea] .ProseMirror{outline:none}[data-v-8407b2ea] .ProseMirror ul{margin:8px 0;padding-left:24px;list-style-type:disc}[data-v-8407b2ea] .ProseMirror ol{margin:8px 0;padding-left:24px;list-style-type:decimal}[data-v-8407b2ea] .ProseMirror li p{margin:4px 0}[data-v-8407b2ea] .ProseMirror blockquote{color:#475569;background-color:#f8fafc;border-left:4px solid #cbd5e1;border-radius:2px;margin:12px 0;padding:8px 16px}[data-v-8407b2ea] .ProseMirror blockquote p{margin:4px 0}[data-v-8407b2ea] .ProseMirror pre{color:#38bdf8;background-color:#0f172a;border-radius:6px;margin:16px 0;padding:12px 16px;font-family:Fira Code,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;overflow-x:auto}[data-v-8407b2ea] .ProseMirror pre code{color:inherit;background:0 0;padding:0;font-size:13px}[data-v-8407b2ea] .ProseMirror hr{cursor:pointer;border:none;border-top:2px solid #e2e8f0;margin:24px 0}[data-v-8407b2ea] .ProseMirror hr.ProseMirror-selectednode{outline:2px solid #38bdf8}[data-v-8407b2ea] .ProseMirror code{color:#e11d48;background-color:#f1f5f9;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.85em;font-weight:500}[data-v-8407b2ea] .ProseMirror .smo-editor-link{color:#2563eb;text-underline-offset:3px;cursor:pointer;font-weight:500;text-decoration:underline}[data-v-8407b2ea] .ProseMirror .smo-editor-link:hover{color:#1d4ed8}[data-v-8407b2ea] .tiptap .is-editor-empty:first-child:before{color:#adb5bd;content:attr(data-placeholder);float:left;pointer-events:none;height:0}[data-v-8407b2ea] .tiptap :first-child{margin-top:0}[data-v-8407b2ea] .tiptap [data-resize-handle]{z-index:10;background:#00000080;border:1px solid #fffc;border-radius:2px;position:absolute}[data-v-8407b2ea] .tiptap [data-resize-handle]:hover{background:#000c}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-right],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-right]{width:8px;height:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-left]{cursor:nwse-resize;top:-4px;left:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-right]{cursor:nesw-resize;top:-4px;right:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-left]{cursor:nesw-resize;bottom:-4px;left:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-right]{cursor:nwse-resize;bottom:-4px;right:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom]{height:6px;left:8px;right:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top]{cursor:ns-resize;top:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom]{cursor:ns-resize;bottom:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=right]{width:6px;top:8px;bottom:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=left]{cursor:ew-resize;left:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=right]{cursor:ew-resize;right:-3px}[data-v-8407b2ea] .tiptap [data-resize-state=true] [data-resize-wrapper]{border-radius:.125rem;outline:1px solid #00000040}.smo-toolbar-group[data-v-0762240b]{align-items:center;gap:2px;padding:0 4px;display:inline-flex;position:relative}.smo-toolbar-group+.smo-toolbar-group[data-v-0762240b]:before{content:"";background-color:#e2e8f0;width:1px;position:absolute;top:6px;bottom:6px;left:-2px}.smo-toolbar-button[data-v-10d293e2]{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:4px;outline:none;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:inline-flex}.smo-toolbar-button[data-v-10d293e2]:hover:not(:disabled){color:#0f172a;background-color:#f1f5f9}.smo-toolbar-button.is-active[data-v-10d293e2]{color:#2563eb;background-color:#e2e8f0;font-weight:700}.smo-toolbar-button[data-v-10d293e2]:disabled{color:#cbd5e1;cursor:not-allowed}.smo-icon[data-v-4de271c4]{vertical-align:middle;flex-shrink:0;display:inline-block}.smo-custom-select[data-v-0b16f052]{-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.smo-select-trigger[data-v-0b16f052]{color:#475569;cursor:pointer;background-color:#0000;border-radius:4px;justify-content:space-between;align-items:center;min-width:50px;height:28px;padding:0 10px;font-size:13px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.smo-select-trigger[data-v-0b16f052]:hover,.smo-select-trigger.is-active[data-v-0b16f052]{color:#0f172a;background-color:#f1f5f9}.smo-select-value[data-v-0b16f052]{font-weight:500}.smo-select-arrow[data-v-0b16f052]{color:#94a3b8;margin-left:8px;font-size:8px;transition:transform .2s;transform:scale(.8)}.smo-select-arrow.is-rotated[data-v-0b16f052]{transform:scale(.8)rotate(180deg)}.smo-select-dropdown[data-v-0b16f052]{z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;min-width:160px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.smo-select-option[data-v-0b16f052]{color:#334155;cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:2px;padding:6px 10px;font-size:13px;transition:background-color .15s;display:flex}.smo-select-option[data-v-0b16f052]:last-child{margin-bottom:0}.smo-select-option[data-v-0b16f052]:hover{color:#0f172a;background-color:#f8fafc}.smo-select-option.is-selected[data-v-0b16f052]{color:#2563eb;background-color:#eff6ff;font-weight:500}.smo-option-check[data-v-0b16f052]{font-size:11px;font-weight:700}.smo-select-option.opt-h1[data-v-0b16f052]{font-size:18px;font-weight:700}.smo-select-option.opt-h2[data-v-0b16f052]{font-size:16px;font-weight:600}.smo-select-option.opt-h3[data-v-0b16f052]{font-size:14px;font-weight:600}.smo-select-option.opt-h4[data-v-0b16f052]{font-size:13px;font-weight:600}.smo-select-option.opt-h5[data-v-0b16f052]{font-size:12px;font-weight:600}.smo-select-option.opt-h6[data-v-0b16f052]{font-size:11px;font-weight:600}.smo-fade-enter-active[data-v-0b16f052],.smo-fade-leave-active[data-v-0b16f052]{transition:opacity .15s,transform .15s}.smo-fade-enter-from[data-v-0b16f052],.smo-fade-leave-to[data-v-0b16f052]{opacity:0;transform:translateY(-4px)}.smo-link-setter[data-v-77dc2707]{display:inline-block}.smo-link-popover-fixed[data-v-77dc2707]{z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:10px;width:280px;padding:12px;display:flex;position:fixed;transform:translate(-50%,-100%);box-shadow:0 10px 25px -5px #0f172a26}.smo-popover-field[data-v-77dc2707]{align-items:center;gap:8px;display:flex}.smo-field-label[data-v-77dc2707]{color:#64748b;min-width:36px;font-size:12px}.smo-link-input[data-v-77dc2707]{border:1px solid #cbd5e1;border-radius:4px;outline:none;flex:1;padding:5px 8px;font-size:12px}.smo-link-input[data-v-77dc2707]:focus{border-color:#2563eb}.smo-link-actions[data-v-77dc2707]{justify-content:flex-end;gap:6px;margin-top:4px;display:flex}.smo-popover-btn[data-v-77dc2707]{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:4px;padding:4px 10px;font-size:12px}.smo-popover-btn.primary[data-v-77dc2707]{color:#fff;background:#2563eb;border-color:#2563eb}.smo-popover-btn.danger[data-v-77dc2707]{color:#fff;background:#ef4444;border-color:#ef4444}.bubble-menu[data-v-3b921f1f]{background-color:#fff;border:1px solid #3d25140d;border-radius:10px;min-width:300px;padding:15px;box-shadow:0 12px 33px #0000000f,0 3.618px 9.949px #0000000a}.bubble-menu .form-item[data-v-3b921f1f]:last-child{margin-bottom:0}.bubble-menu .form-item[data-v-3b921f1f]{color:#475569;align-items:center;margin-bottom:16px;font-size:.8rem;display:flex}.bubble-menu .form-item label[data-v-3b921f1f]{flex-shrink:0;width:4rem}.bubble-menu .form-item input[data-v-3b921f1f]{color:#334155;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:4px;outline:none;flex:1;padding:8px;font-size:12px;transition:border-color .2s}.smo-editor-container{border:1px solid #e2e8f0;border-radius:6px}.smo-toolbar{border-bottom:1px solid #e2e8f0;padding:.25rem}.smo-editor-content{outline:none;min-height:
|
|
1
|
+
[data-v-8407b2ea] .ProseMirror-selectednode{border-radius:4px;outline:2px solid #38bdf8}[data-v-8407b2ea] .tiptap:focus,[data-v-8407b2ea] .ProseMirror{outline:none}[data-v-8407b2ea] .ProseMirror ul{margin:8px 0;padding-left:24px;list-style-type:disc}[data-v-8407b2ea] .ProseMirror ol{margin:8px 0;padding-left:24px;list-style-type:decimal}[data-v-8407b2ea] .ProseMirror li p{margin:4px 0}[data-v-8407b2ea] .ProseMirror blockquote{color:#475569;background-color:#f8fafc;border-left:4px solid #cbd5e1;border-radius:2px;margin:12px 0;padding:8px 16px}[data-v-8407b2ea] .ProseMirror blockquote p{margin:4px 0}[data-v-8407b2ea] .ProseMirror pre{color:#38bdf8;background-color:#0f172a;border-radius:6px;margin:16px 0;padding:12px 16px;font-family:Fira Code,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;overflow-x:auto}[data-v-8407b2ea] .ProseMirror pre code{color:inherit;background:0 0;padding:0;font-size:13px}[data-v-8407b2ea] .ProseMirror hr{cursor:pointer;border:none;border-top:2px solid #e2e8f0;margin:24px 0}[data-v-8407b2ea] .ProseMirror hr.ProseMirror-selectednode{outline:2px solid #38bdf8}[data-v-8407b2ea] .ProseMirror code{color:#e11d48;background-color:#f1f5f9;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.85em;font-weight:500}[data-v-8407b2ea] .ProseMirror .smo-editor-link{color:#2563eb;text-underline-offset:3px;cursor:pointer;font-weight:500;text-decoration:underline}[data-v-8407b2ea] .ProseMirror .smo-editor-link:hover{color:#1d4ed8}[data-v-8407b2ea] .tiptap .is-editor-empty:first-child:before{color:#adb5bd;content:attr(data-placeholder);float:left;pointer-events:none;height:0}[data-v-8407b2ea] .tiptap :first-child{margin-top:0}[data-v-8407b2ea] .tiptap [data-resize-handle]{z-index:10;background:#00000080;border:1px solid #fffc;border-radius:2px;position:absolute}[data-v-8407b2ea] .tiptap [data-resize-handle]:hover{background:#000c}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-right],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-right]{width:8px;height:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-left]{cursor:nwse-resize;top:-4px;left:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top-right]{cursor:nesw-resize;top:-4px;right:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-left]{cursor:nesw-resize;bottom:-4px;left:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom-right]{cursor:nwse-resize;bottom:-4px;right:-4px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom]{height:6px;left:8px;right:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=top]{cursor:ns-resize;top:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=bottom]{cursor:ns-resize;bottom:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=left],[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=right]{width:6px;top:8px;bottom:8px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=left]{cursor:ew-resize;left:-3px}[data-v-8407b2ea] .tiptap [data-resize-handle][data-resize-handle=right]{cursor:ew-resize;right:-3px}[data-v-8407b2ea] .tiptap [data-resize-state=true] [data-resize-wrapper]{border-radius:.125rem;outline:1px solid #00000040}.smo-toolbar-group[data-v-0762240b]{align-items:center;gap:2px;padding:0 4px;display:inline-flex;position:relative}.smo-toolbar-group+.smo-toolbar-group[data-v-0762240b]:before{content:"";background-color:#e2e8f0;width:1px;position:absolute;top:6px;bottom:6px;left:-2px}.smo-toolbar-button[data-v-10d293e2]{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:4px;outline:none;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:inline-flex}.smo-toolbar-button[data-v-10d293e2]:hover:not(:disabled){color:#0f172a;background-color:#f1f5f9}.smo-toolbar-button.is-active[data-v-10d293e2]{color:#2563eb;background-color:#e2e8f0;font-weight:700}.smo-toolbar-button[data-v-10d293e2]:disabled{color:#cbd5e1;cursor:not-allowed}.smo-icon[data-v-4de271c4]{vertical-align:middle;flex-shrink:0;display:inline-block}.smo-custom-select[data-v-0b16f052]{-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.smo-select-trigger[data-v-0b16f052]{color:#475569;cursor:pointer;background-color:#0000;border-radius:4px;justify-content:space-between;align-items:center;min-width:50px;height:28px;padding:0 10px;font-size:13px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.smo-select-trigger[data-v-0b16f052]:hover,.smo-select-trigger.is-active[data-v-0b16f052]{color:#0f172a;background-color:#f1f5f9}.smo-select-value[data-v-0b16f052]{font-weight:500}.smo-select-arrow[data-v-0b16f052]{color:#94a3b8;margin-left:8px;font-size:8px;transition:transform .2s;transform:scale(.8)}.smo-select-arrow.is-rotated[data-v-0b16f052]{transform:scale(.8)rotate(180deg)}.smo-select-dropdown[data-v-0b16f052]{z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;min-width:160px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.smo-select-option[data-v-0b16f052]{color:#334155;cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:2px;padding:6px 10px;font-size:13px;transition:background-color .15s;display:flex}.smo-select-option[data-v-0b16f052]:last-child{margin-bottom:0}.smo-select-option[data-v-0b16f052]:hover{color:#0f172a;background-color:#f8fafc}.smo-select-option.is-selected[data-v-0b16f052]{color:#2563eb;background-color:#eff6ff;font-weight:500}.smo-option-check[data-v-0b16f052]{font-size:11px;font-weight:700}.smo-select-option.opt-h1[data-v-0b16f052]{font-size:18px;font-weight:700}.smo-select-option.opt-h2[data-v-0b16f052]{font-size:16px;font-weight:600}.smo-select-option.opt-h3[data-v-0b16f052]{font-size:14px;font-weight:600}.smo-select-option.opt-h4[data-v-0b16f052]{font-size:13px;font-weight:600}.smo-select-option.opt-h5[data-v-0b16f052]{font-size:12px;font-weight:600}.smo-select-option.opt-h6[data-v-0b16f052]{font-size:11px;font-weight:600}.smo-fade-enter-active[data-v-0b16f052],.smo-fade-leave-active[data-v-0b16f052]{transition:opacity .15s,transform .15s}.smo-fade-enter-from[data-v-0b16f052],.smo-fade-leave-to[data-v-0b16f052]{opacity:0;transform:translateY(-4px)}.smo-link-setter[data-v-77dc2707]{display:inline-block}.smo-link-popover-fixed[data-v-77dc2707]{z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:10px;width:280px;padding:12px;display:flex;position:fixed;transform:translate(-50%,-100%);box-shadow:0 10px 25px -5px #0f172a26}.smo-popover-field[data-v-77dc2707]{align-items:center;gap:8px;display:flex}.smo-field-label[data-v-77dc2707]{color:#64748b;min-width:36px;font-size:12px}.smo-link-input[data-v-77dc2707]{border:1px solid #cbd5e1;border-radius:4px;outline:none;flex:1;padding:5px 8px;font-size:12px}.smo-link-input[data-v-77dc2707]:focus{border-color:#2563eb}.smo-link-actions[data-v-77dc2707]{justify-content:flex-end;gap:6px;margin-top:4px;display:flex}.smo-popover-btn[data-v-77dc2707]{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:4px;padding:4px 10px;font-size:12px}.smo-popover-btn.primary[data-v-77dc2707]{color:#fff;background:#2563eb;border-color:#2563eb}.smo-popover-btn.danger[data-v-77dc2707]{color:#fff;background:#ef4444;border-color:#ef4444}.bubble-menu[data-v-3b921f1f]{background-color:#fff;border:1px solid #3d25140d;border-radius:10px;min-width:300px;padding:15px;box-shadow:0 12px 33px #0000000f,0 3.618px 9.949px #0000000a}.bubble-menu .form-item[data-v-3b921f1f]:last-child{margin-bottom:0}.bubble-menu .form-item[data-v-3b921f1f]{color:#475569;align-items:center;margin-bottom:16px;font-size:.8rem;display:flex}.bubble-menu .form-item label[data-v-3b921f1f]{flex-shrink:0;width:4rem}.bubble-menu .form-item input[data-v-3b921f1f]{color:#334155;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:4px;outline:none;flex:1;padding:8px;font-size:12px;transition:border-color .2s}.smo-editor-container{border:1px solid #e2e8f0;border-radius:6px}.smo-toolbar{border-bottom:1px solid #e2e8f0;padding:.25rem}.smo-editor-content{outline:none;min-height:10rem;padding:16px}.smo-editor-content img{max-width:100%;transition:width .2s cubic-bezier(.4,0,.2,1);display:block}.smo-editor-content img[data-align=left]{margin-right:auto}.smo-editor-content img[data-align=center]{margin:0 auto}.smo-editor-content img[data-align=right]{margin-left:auto}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/smo-editor.d.ts
CHANGED
|
@@ -3,24 +3,22 @@ import { ComponentProvideOptions } from 'vue';
|
|
|
3
3
|
import { DefineComponent } from 'vue';
|
|
4
4
|
import { PublicProps } from 'vue';
|
|
5
5
|
|
|
6
|
-
declare const __VLS_export: DefineComponent<
|
|
6
|
+
declare const __VLS_export: DefineComponent<SmoEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
7
7
|
"update:modelValue": (value: string) => any;
|
|
8
|
-
}, string, PublicProps, Readonly<
|
|
8
|
+
}, string, PublicProps, Readonly<SmoEditorOptions & {
|
|
9
|
+
modelValue?: string;
|
|
10
|
+
} & {
|
|
9
11
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
10
12
|
}>, {
|
|
11
13
|
placeholder: string;
|
|
12
14
|
editable: boolean;
|
|
13
15
|
modelValue: string;
|
|
14
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}
|
|
16
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}>;
|
|
15
17
|
|
|
16
|
-
declare
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/** 编辑器容器高度 */
|
|
21
|
-
height?: string | number;
|
|
22
|
-
onImageUpload?: (file: File) => Promise<string>;
|
|
23
|
-
};
|
|
18
|
+
export declare interface ImageUploadResult {
|
|
19
|
+
url: string;
|
|
20
|
+
alt?: string;
|
|
21
|
+
}
|
|
24
22
|
|
|
25
23
|
export declare const SmoEditor: typeof __VLS_export;
|
|
26
24
|
|
|
@@ -34,7 +32,11 @@ export declare interface SmoEditorOptions {
|
|
|
34
32
|
/** 占位符文字 */
|
|
35
33
|
placeholder?: string;
|
|
36
34
|
/** 图片上传处理函数 */
|
|
37
|
-
onImageUpload?: (file: File) => Promise<
|
|
35
|
+
onImageUpload?: (file: File) => ImageUploadResult | Promise<ImageUploadResult>;
|
|
38
36
|
}
|
|
39
37
|
|
|
38
|
+
declare type SmoEditorProps = SmoEditorOptions & {
|
|
39
|
+
modelValue?: string;
|
|
40
|
+
};
|
|
41
|
+
|
|
40
42
|
export { }
|