@mario9/tiptap-editor 0.1.1 → 0.1.3
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 -3
- package/dist/tiptap-editor.css +1 -1
- package/dist/tiptap-editor.js +579 -490
- package/dist/tiptap-editor.umd.cjs +1 -1
- package/package.json +48 -16
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ pnpm add @mario9/tiptap-editor
|
|
|
11
11
|
安装 peer dependencies：
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
|
-
pnpm add vue element-plus katex @tiptap/core @tiptap/starter-kit @tiptap/vue-3 @tiptap/pm @tiptap/extensions @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mathematics @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-text-align @tiptap/extension-typography
|
|
14
|
+
pnpm add vue element-plus katex lowlight @tiptap/core @tiptap/starter-kit @tiptap/vue-3 @tiptap/pm @tiptap/extensions @tiptap/extension-bubble-menu @tiptap/extension-code-block-lowlight @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mathematics @tiptap/extension-placeholder @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-text-align @tiptap/extension-typography
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## 快速开始
|
|
@@ -75,12 +75,40 @@ const upload: UploadFn = async (file) => {
|
|
|
75
75
|
- 图片插入（支持自定义上传函数，默认转为 Base64）
|
|
76
76
|
- 表格（含行列增删、移动操作）
|
|
77
77
|
- 数学公式（内联 / 块级，基于 KaTeX）
|
|
78
|
+
- 代码块（支持语法高亮，见下方说明）
|
|
79
|
+
- 气泡菜单（选中文本时快速格式化）
|
|
80
|
+
|
|
81
|
+
### 代码高亮
|
|
82
|
+
|
|
83
|
+
编辑器使用 `lowlight` 提供语法高亮，默认支持以下常见语言：
|
|
84
|
+
|
|
85
|
+
**Web 开发**: JavaScript, TypeScript, HTML, CSS, SCSS, JSON, XML
|
|
86
|
+
**后端**: Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift, Kotlin
|
|
87
|
+
**脚本/配置**: Bash, Shell, YAML, TOML, Makefile, Dockerfile
|
|
88
|
+
**数据库**: SQL
|
|
89
|
+
**其他**: Markdown, Diff, Plaintext
|
|
90
|
+
|
|
91
|
+
如需支持更多语言，可以自定义 `lowlight` 实例：
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { createLowlight } from 'lowlight'
|
|
95
|
+
import javascript from 'highlight.js/lib/languages/javascript'
|
|
96
|
+
import python from 'highlight.js/lib/languages/python'
|
|
97
|
+
// 按需导入其他语言...
|
|
98
|
+
|
|
99
|
+
const customLowlight = createLowlight()
|
|
100
|
+
customLowlight.register('javascript', javascript)
|
|
101
|
+
customLowlight.register('python', python)
|
|
102
|
+
|
|
103
|
+
// 在编辑器配置中使用自定义实例
|
|
104
|
+
// 注意：这需要修改库源码或 fork 后自定义
|
|
105
|
+
```
|
|
78
106
|
|
|
79
107
|
## 技术栈
|
|
80
108
|
|
|
81
109
|
- vue 3.5.25
|
|
82
110
|
- element-plus 2.13.3
|
|
83
|
-
- @tiptap/core 3.
|
|
111
|
+
- @tiptap/core 3.22.5
|
|
84
112
|
|
|
85
113
|
## 代码结构
|
|
86
114
|
|
|
@@ -95,7 +123,9 @@ src/
|
|
|
95
123
|
│ ├── TextStyleButton.tsx # 加粗、斜体、删除线、下划线、链接
|
|
96
124
|
│ ├── TextAlignButton.tsx # 左边对齐、中间对齐、右边对齐、两端对齐
|
|
97
125
|
│ ├── ListButton.tsx # 无序列表、有序列表、任务列表
|
|
98
|
-
│
|
|
126
|
+
│ ├── CodeBlockButton.tsx # 代码块（含语法高亮）
|
|
127
|
+
│ ├── ImageButton.tsx # 图片上传
|
|
128
|
+
│ └── BubbleMenuBar.tsx # 气泡菜单（选中文本时浮现）
|
|
99
129
|
├── tiptap-icons/ # SVG 图标组件 (TSX)
|
|
100
130
|
└── tiptap-extension/ # Tiptap extensions
|
|
101
131
|
```
|