lianshu-editor 1.0.141

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 lianshu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,128 @@
1
+ # Lianshu Editor
2
+
3
+ 一个基于 Tiptap 的 Notion 风格富文本编辑器,专为 Vue 3 设计。
4
+
5
+ ## 特性
6
+
7
+ - 🎨 **Notion 风格**:行首加号菜单、斜杠命令、悬浮工具栏
8
+ - 🖼️ **图片上传**:支持拖拽、粘贴、点击上传
9
+ - 🌓 **主题切换**:内置浅色/深色主题支持
10
+ - 💻 **代码高亮**:支持 20+ 种编程语言
11
+ - ✅ **任务列表**:可勾选的待办事项
12
+ - 📝 **Markdown 快捷键**:支持常用 Markdown 语法
13
+ - 🎯 **TypeScript**:完整的类型定义
14
+
15
+ ## 安装
16
+
17
+ ```bash
18
+ npm install lianshu-editor
19
+ ```
20
+
21
+ ## 使用
22
+
23
+ ### 基础用法
24
+
25
+ ```vue
26
+ <script setup lang="ts">
27
+ import { ref } from 'vue'
28
+ import { LianshuEditor } from 'lianshu-editor'
29
+ import 'lianshu-editor/style.css'
30
+
31
+ const content = ref('<p>Hello World</p>')
32
+ </script>
33
+
34
+ <template>
35
+ <LianshuEditor v-model="content" />
36
+ </template>
37
+ ```
38
+
39
+ ### 主题配置
40
+
41
+ ```vue
42
+ <template>
43
+ <LianshuEditor
44
+ v-model="content"
45
+ :theme="isDark ? 'dark' : 'light'"
46
+ />
47
+ </template>
48
+ ```
49
+
50
+ ### 图片上传配置
51
+
52
+ ```vue
53
+ <script setup lang="ts">
54
+ import { LianshuEditor, type ImageConfig } from 'lianshu-editor'
55
+
56
+ const imageUploader = async (file: File) => {
57
+ // 上传到你的服务器
58
+ const formData = new FormData()
59
+ formData.append('file', file)
60
+ const response = await fetch('/upload', {
61
+ method: 'POST',
62
+ body: formData
63
+ })
64
+ const data = await response.json()
65
+
66
+ return {
67
+ errorCode: 0,
68
+ data: {
69
+ src: data.url,
70
+ alt: file.name
71
+ }
72
+ }
73
+ }
74
+
75
+ const imageConfig: ImageConfig = {
76
+ uploader: imageUploader,
77
+ maxSize: 5, // 最大 5MB
78
+ acceptTypes: ['jpeg', 'jpg', 'png', 'gif', 'webp']
79
+ }
80
+ </script>
81
+
82
+ <template>
83
+ <LianshuEditor
84
+ v-model="content"
85
+ :image="imageConfig"
86
+ />
87
+ </template>
88
+ ```
89
+
90
+ ## Props
91
+
92
+ | 属性 | 类型 | 默认值 | 说明 |
93
+ |------|------|--------|------|
94
+ | `modelValue` | `string` | `'<p></p>'` | 编辑器内容(HTML) |
95
+ | `placeholder` | `string` | `"输入 '/' 唤起菜单..."` | 占位符文本 |
96
+ | `editable` | `boolean` | `true` | 是否可编辑 |
97
+ | `theme` | `'light' \| 'dark'` | `'light'` | 主题 |
98
+ | `image` | `ImageConfig \| boolean` | `false` | 图片配置 |
99
+
100
+ ## 类型定义
101
+
102
+ ```typescript
103
+ interface ImageUploader {
104
+ (file: File): Promise<{
105
+ errorCode: number
106
+ data: {
107
+ src: string
108
+ alt?: string
109
+ title?: string
110
+ }
111
+ }>
112
+ }
113
+
114
+ interface ImageConfig {
115
+ uploader?: ImageUploader
116
+ maxSize?: number // MB
117
+ acceptTypes?: string[]
118
+ }
119
+ ```
120
+
121
+ ## 开发构建
122
+
123
+ - 构建完整库:`npm run build`
124
+ - 仅构建 MobileEditor:`npm run build:mobile`
125
+
126
+ ## License
127
+
128
+ MIT