@mooth/tiptap-vue2 0.0.0-stage → 0.0.1
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 +21 -0
- package/README.md +72 -2
- package/dist/style.css +1 -0
- package/dist/tiptap-vue2.js +21745 -0
- package/dist/tiptap-vue2.umd.cjs +154 -0
- package/package.json +56 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 tiptap-vue2 contributors
|
|
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
CHANGED
|
@@ -1,3 +1,73 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @mooth/tiptap-vue2
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Tiptap 富文本编辑器组件，基于 Vue 2.7 + Tiptap v3，Vite 库模式打包。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @mooth/tiptap-vue2
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
要求：`vue@^2.7.0`（peer dependency，需宿主项目自行安装）。
|
|
12
|
+
|
|
13
|
+
## 使用
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import TipTap from '@mooth/tiptap-vue2'
|
|
17
|
+
import '@mooth/tiptap-vue2/style.css'
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
components: { TipTap },
|
|
21
|
+
methods: {
|
|
22
|
+
save() {
|
|
23
|
+
const html = this.$refs.editor.getHTML()
|
|
24
|
+
// ...
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<TipTap ref="editor" :height="400" />
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
同时导出：`import { TipTap, useEditor, render } from '@mooth/tiptap-vue2'`，
|
|
35
|
+
`render(json)` 可将存储的 JSON 内容渲染为 HTML（公告回显场景）。
|
|
36
|
+
|
|
37
|
+
## API
|
|
38
|
+
|
|
39
|
+
### Props
|
|
40
|
+
|
|
41
|
+
| 名称 | 类型 | 默认值 | 说明 |
|
|
42
|
+
| -------- | ------ | ------ | -------------- |
|
|
43
|
+
| `height` | Number | 300 | 内容区高度(px) |
|
|
44
|
+
|
|
45
|
+
### 实例方法（`ref` 调用）
|
|
46
|
+
|
|
47
|
+
| 方法 | 说明 |
|
|
48
|
+
| --------------- | --------------------- |
|
|
49
|
+
| `getHTML()` | 获取 HTML 字符串 |
|
|
50
|
+
| `getText()` | 获取纯文本 |
|
|
51
|
+
| `getJSON()` | 获取 Tiptap JSON 文档 |
|
|
52
|
+
| `setContent(h)` | 设置内容（HTML/JSON） |
|
|
53
|
+
| `resetContent()`| 清空为初始内容 |
|
|
54
|
+
|
|
55
|
+
## 本地开发
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
pnpm install
|
|
59
|
+
pnpm dev # 跑 src/demo 预览
|
|
60
|
+
pnpm build # 打包到 dist/
|
|
61
|
+
pnpm format # biome 格式化
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 发布
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
pnpm build && pnpm pack --dry-run
|
|
68
|
+
npm publish
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.tiptap-dropdown[data-v-1a885b9c]{position:relative}.tiptap-button[data-v-1a885b9c]{gap:0;padding-right:.25rem}.tiptap-button[data-v-1a885b9c]:hover{background:#f3f4f6;color:#374151}.tiptap-button-dropdown-small[data-v-1a885b9c]{width:.625rem}.tiptap-menu[data-v-1a885b9c]{position:absolute;top:calc(100% + 10px);left:0;display:none;z-index:50;width:9rem;border-radius:1.125rem;background-color:#fff;color:#24272ec7;box-shadow:0 16px 48px #1118270a,0 12px 24px #1118270a,0 6px 8px #11182705,0 2px 3px #11182705;padding:.375rem;transition-duration:.1s}.tiptap-menu[data-open=true][data-v-1a885b9c]{display:block}.tiptap-menu-item[data-v-1a885b9c]{width:100%;display:flex;align-items:center;gap:.35rem;justify-content:start}.tiptap-menu-item[data-v-1a885b9c]:hover{background:#f5f5f5}.tiptap-dropdown[data-v-e8500f4f]{position:relative}.tiptap-button[data-v-e8500f4f]{gap:0;padding-right:.25rem}.tiptap-button[data-v-e8500f4f]:hover{background:#f3f4f6;color:#374151}.tiptap-button-dropdown-small[data-v-e8500f4f]{width:.625rem}.tiptap-menu[data-v-e8500f4f]{position:absolute;top:calc(100% + 10px);left:0;display:none;z-index:50;width:10rem;border-radius:1.125rem;background-color:#fff;color:#24272ec7;box-shadow:0 16px 48px #1118270a,0 12px 24px #1118270a,0 6px 8px #11182705,0 2px 3px #11182705;padding:.375rem;transition-duration:.1s}.tiptap-menu[data-open=true][data-v-e8500f4f]{display:block}.tiptap-menu-item[data-v-e8500f4f]{width:100%;display:flex;align-items:center;gap:.35rem;justify-content:start}.tiptap-menu-item[data-v-e8500f4f]:hover{background:#f5f5f5}.tiptap-hidden-input[data-v-2dd6c5ec]{display:none}.tiptap-button .tiptap-button-text[data-v-2dd6c5ec]{text-align:left;flex-grow:1;padding:0 .125rem;line-height:1.5rem}.tiptap-dropdown[data-v-836ccf65]{position:relative}.tiptap-card[data-v-836ccf65]{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.375rem;display:none;padding:.375rem;border-radius:12px;background:#fff;box-shadow:0 8px 20px #00000014;z-index:1000}.tiptap-card[data-open=true][data-v-836ccf65]{display:flex}.tiptap-card-item-group[data-v-836ccf65]{display:flex;flex-direction:row;align-items:center;gap:.125rem}.tiptap-button[data-v-836ccf65]{padding:.375rem}.tiptap-button-highlight[data-v-836ccf65]{border-radius:1rem;width:1.25rem;height:1.25rem;margin:0 -.175rem;transition:transform .2s;position:relative}.tiptap-button-highlight[data-v-836ccf65]:after{content:"";border-radius:inherit;box-sizing:border-box;border:1px solid gray;filter:brightness(95%);mix-blend-mode:multiply;width:100%;height:100%;position:absolute;top:0;left:0}.tiptap-color-item[data-active=true][data-v-836ccf65]{border-color:#111827}.tiptap-separator[data-v-836ccf65]{width:1px;height:1.5rem}.scrollbar[data-v-775bd84a]{position:relative;height:100%;overflow:hidden;--track-size: 12px;--thumb-size: 6px;--thumb-hover-size: 10px}.viewport[data-v-775bd84a]{height:100%;overflow:auto;scrollbar-width:none}.viewport[data-v-775bd84a]::-webkit-scrollbar{display:none}.track[data-v-775bd84a]{display:flex;position:absolute;z-index:9;overflow:hidden;opacity:0;transition:opacity .3s;user-select:none;-webkit-user-select:none}.scrollbar.dragging[data-v-775bd84a],.scrollbar.dragging .viewport[data-v-775bd84a],.scrollbar.dragging .viewport *[data-v-775bd84a]{user-select:none!important;-webkit-user-select:none!important}.scrollbar.show .track[data-v-775bd84a],.track[data-v-775bd84a]:hover,.scrollbar:has(.thumb.active) .track[data-v-775bd84a]{opacity:1}.track.y[data-v-775bd84a]{top:0;right:0;bottom:0;width:var(--track-size);padding-right:2px;justify-content:end;align-items:flex-start}.track.y.with-x[data-v-775bd84a]{bottom:var(--track-size)}.track.x[data-v-775bd84a]{left:0;right:0;bottom:0;height:var(--track-size);padding-bottom:2px;justify-content:flex-start;align-items:end;transition:opacity .3s}.track.x.with-y[data-v-775bd84a]{right:var(--track-size)}.thumb[data-v-775bd84a]{background:#0000001a;border-radius:999px;flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:width .3s,height .3s}.track.y .thumb[data-v-775bd84a]{width:var(--thumb-size)}.track.y:hover .thumb[data-v-775bd84a],.track.y .thumb.active[data-v-775bd84a]{width:var(--thumb-hover-size)}.track.x .thumb[data-v-775bd84a]{height:var(--thumb-size)}.track.x:hover .thumb[data-v-775bd84a],.track.x .thumb.active[data-v-775bd84a]{height:var(--thumb-hover-size)}.tiptap{overflow-wrap:break-word}.tiptap .ProseMirror{box-sizing:border-box;width:100%;max-width:100%;min-height:100%;padding:1rem clamp(1rem,2.5vw,2rem) 2rem;border-radius:.75rem;line-height:1.7;color:#222325;caret-color:#7c3aed;white-space:pre-wrap}.tiptap>.ProseMirror *:first-child{margin-top:0}.tiptap>*:last-child{margin-bottom:0}.tiptap .ProseMirror:focus{outline:none}.tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;width:100%;color:#9ca3af;pointer-events:none;height:0}.tiptap h1,.tiptap h2,.tiptap h3,.tiptap h4,.tiptap p,.tiptap ul,.tiptap ol,.tiptap blockquote,.tiptap pre,.tiptap hr{max-width:100%}.tiptap h1{margin:1.5em 0 .75em;font-size:1.5em;font-weight:700;line-height:1.3}.tiptap h2{margin:1.4em 0 .7em;font-size:1.25em;font-weight:700;line-height:1.35}.tiptap h3{margin:1.25em 0 .6em;font-size:1.125em;font-weight:600;line-height:1.4}.tiptap h4{margin:1.15em 0 .5em;font-size:1em;font-weight:600;line-height:1.45}.tiptap p{margin:.75em 0;font-size:1rem;font-weight:400;line-height:1.6}.tiptap p:only-child{margin:0}.tiptap .tableWrapper{width:100%;max-width:100%;margin:.75rem 0;overflow-x:auto}.tiptap table{width:100%;min-width:100%;border-collapse:collapse;table-layout:auto;border:1px solid #e5e7eb}.tiptap th,.tiptap td{border:1px solid #e5e7eb;padding:6px 8px;vertical-align:top;min-width:3rem;overflow-wrap:break-word;word-break:break-word;white-space:pre-wrap}.tiptap th{background:#f8fafc;font-weight:600}.tiptap th p,.tiptap td p{margin:0}.tiptap .selectedCell:after{background:#c8c8ff66}.tiptap blockquote{margin:1rem 0;padding:.375em 0 .375em 1em;position:relative;font-size:1rem}.tiptap blockquote p{margin:.5em 0}.tiptap blockquote:before,.tiptap blockquote.is-empty:before{background-color:#222325;content:"";border-radius:0;width:.25em;height:100%;position:absolute;top:0;bottom:0;left:0}.tiptap pre{background-color:#3838380a;color:#1e2024f2;border:1px solid #25272d1a;border-radius:.375rem;margin:1rem 0;padding:1rem;font-size:.875rem;line-height:1.6;overflow-x:auto;white-space:pre}.tiptap pre code{background:none;border:none;padding:0;font-size:inherit;line-height:inherit}.tiptap :not(pre) code{background-color:#0f16240d;color:#23252ade;border:1px solid #25272d1a;border-radius:.375rem;padding:.1rem .2rem;font-family:JetBrains Mono NL,ui-monospace,monospace;font-size:.875em;line-height:1.4;overflow-wrap:break-word}.tiptap mark{border-radius:.125rem;padding:0 .125rem}.tiptap a{color:#6229ff;text-decoration:underline;overflow-wrap:break-word;word-break:break-all}.tiptap u{text-underline-offset:2px}.tiptap hr{margin:1.5rem 0;border:none;border-top:1px solid #e5e7eb}.tiptap ul,.tiptap ol{margin:.75rem 0;padding-left:1.5em;font-size:1rem}.tiptap ul ul,.tiptap ul ol,.tiptap ol ul,.tiptap ol ol{margin:.25rem 0}.tiptap ul{list-style-type:disc}.tiptap ol{list-style-type:decimal}.tiptap li{list-style:inherit}.tiptap li>p{margin:.25em 0}.tiptap ul[data-type=taskList]{padding-left:.25em;margin:.75rem 0;list-style:none}.tiptap ul[data-type=taskList] li{display:flex;align-items:flex-start;gap:.25rem}.tiptap ul[data-type=taskList] li label{flex-shrink:0;padding-top:.375rem;padding-right:.5rem;position:relative}.tiptap ul[data-type=taskList] li label input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.tiptap ul[data-type=taskList] li label span{border:1px solid #25272d1a;border-radius:.25rem;cursor:pointer;background-color:#0f16240d;width:1em;height:1em;transition:background-color 80ms ease-out,border-color 80ms ease-out;display:block;position:relative}.tiptap ul[data-type=taskList] li label span:before{content:"";background-color:#fff;opacity:0;width:.75em;height:.75em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) 50% / contain no-repeat;mask:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) 50% / contain no-repeat}.tiptap ul[data-type=taskList] li label input[type=checkbox]:checked+span{background:#1d1e20fa;border-color:#1d1e20fa}.tiptap ul[data-type=taskList] li label input[type=checkbox]:checked+span:before{opacity:1}.tiptap ul[data-type=taskList] li>div{flex:1;min-width:0}.tiptap ul[data-type=taskList] li[data-checked=true] div p{opacity:.5;text-decoration:line-through}.tiptap img{display:block;max-width:100%;height:auto;margin:.75rem auto;border-radius:.375rem}.simple-editor{display:flex;flex-direction:column;width:100%;border-radius:.75rem;color:#222325;font-size:1rem;overflow:hidden}.tiptap-toolbar{display:flex;align-items:center;gap:.25rem;height:2.75rem;border-bottom:1px solid #0f16240d;background:#fff;transition:background .2s ease}.tiptap-toolbar[data-locked=true]{pointer-events:none;opacity:.45}.tiptap-button-icon{color:inherit;width:1rem;height:1rem}.tiptap-toolbar-group{display:flex;align-items:center;gap:.125rem}.tiptap-separator{width:1px;height:1.5rem;background:#e6e6e6}.tiptap-button{font-feature-settings:"salt" on,"cv01" on;border-radius:.75rem;min-width:2rem;height:2rem;transition-property:background,color,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.46,.03,.52,.96);border:none;justify-content:center;align-items:center;gap:.25rem;padding:.5rem;font-size:.875rem;font-weight:500;line-height:1.15;display:flex;background:none;color:#24272ec7}.tiptap-button:hover{background:#eaeaeb;color:#374151;cursor:pointer}.tiptap-button[data-active-state=on]{background:#0f16240d;color:#6d28d9}.tiptap-button[data-disabled=true],.tiptap-button:disabled{background-color:#fff0;opacity:.45;cursor:not-allowed}.tiptap-button-dropdown-small{width:.875rem;height:.875rem}.tiptap-button[aria-label]{position:relative}.tiptap-button[aria-label]:after,.tiptap-button[aria-label]:before{opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.tiptap-button[aria-label]:after{content:attr(aria-label);position:absolute;bottom:-2.5rem;left:50%;transform:translate(-50%) translateY(4px);background:#111827;color:#fff;font-size:.75rem;padding:.625rem;border-radius:.625rem;white-space:nowrap;box-shadow:0 8px 16px #0003;z-index:999}.tiptap-button[aria-label]:before{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);z-index:999}.tiptap-button[aria-label]:hover:after,.tiptap-button[aria-label]:hover:before{opacity:1;transform:translate(-50%) translateY(0)}.tiptap-hidden-input{display:none}.tiptap-scroll{flex:1}
|