@fishawack/lab-velocity 0.8.6 → 0.8.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/components/_wysiwyg2.scss +2 -1
- package/form/Wysiwyg2.vue +41 -27
- package/package.json +1 -1
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
min-width: 28px;
|
|
29
29
|
padding: 3px 5px;
|
|
30
30
|
line-height: 1;
|
|
31
|
+
border: none;
|
|
31
32
|
&.is-active, &:hover {
|
|
32
33
|
background-color: $color5;
|
|
33
34
|
}
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
~ div {
|
|
80
81
|
// margin-top: $spacing;
|
|
81
82
|
border: solid $color5 2px;
|
|
82
|
-
padding: 2* $spacing;
|
|
83
|
+
padding: 2 * $spacing;
|
|
83
84
|
background-color: $color0;
|
|
84
85
|
}
|
|
85
86
|
}
|
package/form/Wysiwyg2.vue
CHANGED
|
@@ -47,120 +47,120 @@
|
|
|
47
47
|
<template #dropdown>
|
|
48
48
|
<el-dropdown-menu>
|
|
49
49
|
<el-dropdown-item>
|
|
50
|
-
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
|
|
50
|
+
<button type="button" @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
|
|
51
51
|
Insert table
|
|
52
52
|
</button>
|
|
53
53
|
</el-dropdown-item>
|
|
54
54
|
<el-dropdown-item>
|
|
55
|
-
<button @click="editor.chain().focus().addColumnBefore().run()">
|
|
55
|
+
<button type="button" @click="editor.chain().focus().addColumnBefore().run()">
|
|
56
56
|
Add column before
|
|
57
57
|
</button>
|
|
58
58
|
</el-dropdown-item>
|
|
59
59
|
<el-dropdown-item>
|
|
60
|
-
<button @click="editor.chain().focus().addColumnAfter().run()">
|
|
60
|
+
<button type="button" @click="editor.chain().focus().addColumnAfter().run()">
|
|
61
61
|
Add column after
|
|
62
62
|
</button>
|
|
63
63
|
</el-dropdown-item>
|
|
64
64
|
<el-dropdown-item>
|
|
65
|
-
<button @click="editor.chain().focus().deleteColumn().run()">
|
|
65
|
+
<button type="button" @click="editor.chain().focus().deleteColumn().run()">
|
|
66
66
|
Delete column
|
|
67
67
|
</button>
|
|
68
68
|
</el-dropdown-item>
|
|
69
69
|
<el-dropdown-item>
|
|
70
|
-
<button @click="editor.chain().focus().addRowBefore().run()">
|
|
70
|
+
<button type="button" @click="editor.chain().focus().addRowBefore().run()">
|
|
71
71
|
Add row before
|
|
72
72
|
</button>
|
|
73
73
|
</el-dropdown-item>
|
|
74
74
|
<el-dropdown-item>
|
|
75
|
-
<button @click="editor.chain().focus().addRowAfter().run()">
|
|
75
|
+
<button type="button" @click="editor.chain().focus().addRowAfter().run()">
|
|
76
76
|
Add row after
|
|
77
77
|
</button>
|
|
78
78
|
</el-dropdown-item>
|
|
79
79
|
<el-dropdown-item>
|
|
80
|
-
<button @click="editor.chain().focus().deleteRow().run()">
|
|
80
|
+
<button type="button" @click="editor.chain().focus().deleteRow().run()">
|
|
81
81
|
Delete row
|
|
82
82
|
</button>
|
|
83
83
|
</el-dropdown-item>
|
|
84
84
|
<el-dropdown-item>
|
|
85
|
-
<button @click="editor.chain().focus().deleteTable().run()">
|
|
85
|
+
<button type="button" @click="editor.chain().focus().deleteTable().run()">
|
|
86
86
|
Delete table
|
|
87
87
|
</button>
|
|
88
88
|
</el-dropdown-item>
|
|
89
89
|
<el-dropdown-item>
|
|
90
|
-
<button @click="editor.chain().focus().mergeCells().run()">
|
|
90
|
+
<button type="button" @click="editor.chain().focus().mergeCells().run()">
|
|
91
91
|
Merge cells
|
|
92
92
|
</button>
|
|
93
93
|
</el-dropdown-item>
|
|
94
94
|
<el-dropdown-item>
|
|
95
|
-
<button @click="editor.chain().focus().splitCell().run()">
|
|
95
|
+
<button type="button" @click="editor.chain().focus().splitCell().run()">
|
|
96
96
|
Split cell
|
|
97
97
|
</button>
|
|
98
98
|
</el-dropdown-item>
|
|
99
99
|
<el-dropdown-item>
|
|
100
|
-
<button @click="editor.chain().focus().toggleHeaderColumn().run()">
|
|
100
|
+
<button type="button" @click="editor.chain().focus().toggleHeaderColumn().run()">
|
|
101
101
|
Toggle header column
|
|
102
102
|
</button>
|
|
103
103
|
</el-dropdown-item>
|
|
104
104
|
<el-dropdown-item>
|
|
105
|
-
<button @click="editor.chain().focus().toggleHeaderRow().run()">
|
|
105
|
+
<button type="button" @click="editor.chain().focus().toggleHeaderRow().run()">
|
|
106
106
|
Toggle header row
|
|
107
107
|
</button>
|
|
108
108
|
</el-dropdown-item>
|
|
109
109
|
<el-dropdown-item>
|
|
110
|
-
<button @click="editor.chain().focus().toggleHeaderCell().run()">
|
|
110
|
+
<button type="button" @click="editor.chain().focus().toggleHeaderCell().run()">
|
|
111
111
|
Toggle header cell
|
|
112
112
|
</button>
|
|
113
113
|
</el-dropdown-item>
|
|
114
114
|
<el-dropdown-item>
|
|
115
|
-
<button @click="editor.chain().focus().mergeOrSplit().run()">
|
|
115
|
+
<button type="button" @click="editor.chain().focus().mergeOrSplit().run()">
|
|
116
116
|
Merge or split
|
|
117
117
|
</button>
|
|
118
118
|
</el-dropdown-item>
|
|
119
119
|
<el-dropdown-item>
|
|
120
|
-
<button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
|
|
120
|
+
<button type="button" @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
|
|
121
121
|
Set cell attribute
|
|
122
122
|
</button>
|
|
123
123
|
</el-dropdown-item>
|
|
124
124
|
<el-dropdown-item>
|
|
125
|
-
<button @click="editor.chain().focus().fixTables().run()">
|
|
125
|
+
<button type="button" @click="editor.chain().focus().fixTables().run()">
|
|
126
126
|
Fix tables
|
|
127
127
|
</button>
|
|
128
128
|
</el-dropdown-item>
|
|
129
129
|
<el-dropdown-item>
|
|
130
|
-
<button @click="editor.chain().focus().goToNextCell().run()">
|
|
130
|
+
<button type="button" @click="editor.chain().focus().goToNextCell().run()">
|
|
131
131
|
Go to next cell
|
|
132
132
|
</button>
|
|
133
133
|
</el-dropdown-item>
|
|
134
134
|
<el-dropdown-item>
|
|
135
|
-
<button @click="editor.chain().focus().goToPreviousCell().run()">
|
|
135
|
+
<button type="button" @click="editor.chain().focus().goToPreviousCell().run()">
|
|
136
136
|
Go to previous cell
|
|
137
137
|
</button>
|
|
138
138
|
</el-dropdown-item>
|
|
139
139
|
</el-dropdown-menu>
|
|
140
140
|
</template>
|
|
141
141
|
</el-dropdown>
|
|
142
|
-
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
|
142
|
+
<button type="button" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
|
143
143
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line> <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line> <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line> <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line> </svg>
|
|
144
144
|
</button>
|
|
145
|
-
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
|
145
|
+
<button type="button" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
|
146
146
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line> <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line> <path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path> <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path> <path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path> </svg>
|
|
147
147
|
</button>
|
|
148
|
-
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
|
148
|
+
<button type="button" @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
|
149
149
|
Code block
|
|
150
150
|
</button>
|
|
151
|
-
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
|
151
|
+
<button type="button" @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
|
152
152
|
Blockquote
|
|
153
153
|
</button>
|
|
154
|
-
<button @click="editor.chain().focus().setHorizontalRule().run()">
|
|
154
|
+
<button type="button" @click="editor.chain().focus().setHorizontalRule().run()">
|
|
155
155
|
Horizontal rule
|
|
156
156
|
</button>
|
|
157
|
-
<button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
|
|
157
|
+
<button type="button" @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
|
|
158
158
|
<svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,7H13.861a4.015,4.015,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.922,1.922,0,0,0,12.021,3.7a0.5,0.5,0,1,0,.957.291,0.917,0.917,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.077-1.164,1.925-1.934,2.486A1.423,1.423,0,0,0,12,7.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,7Z"></path> <path class="ql-fill" d="M9.651,5.241a1,1,0,0,0-1.41.108L6,7.964,3.759,5.349a1,1,0,1,0-1.519,1.3L4.683,9.5,2.241,12.35a1,1,0,1,0,1.519,1.3L6,11.036,8.241,13.65a1,1,0,0,0,1.519-1.3L7.317,9.5,9.759,6.651A1,1,0,0,0,9.651,5.241Z"></path> </svg>
|
|
159
159
|
</button>
|
|
160
|
-
<button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
|
|
160
|
+
<button type="button" @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
|
|
161
161
|
<svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,15H13.861a3.858,3.858,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.921,1.921,0,0,0,12.021,11.7a0.50013,0.50013,0,1,0,.957.291h0a0.914,0.914,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.076-1.16971,1.86982-1.93971,2.43082A1.45639,1.45639,0,0,0,12,15.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,15Z"></path> <path class="ql-fill" d="M9.65,5.241a1,1,0,0,0-1.409.108L6,7.964,3.759,5.349A1,1,0,0,0,2.192,6.59178Q2.21541,6.6213,2.241,6.649L4.684,9.5,2.241,12.35A1,1,0,0,0,3.71,13.70722q0.02557-.02768.049-0.05722L6,11.036,8.241,13.65a1,1,0,1,0,1.567-1.24277Q9.78459,12.3777,9.759,12.35L7.316,9.5,9.759,6.651A1,1,0,0,0,9.65,5.241Z"></path> </svg>
|
|
162
162
|
</button>
|
|
163
|
-
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
|
163
|
+
<button type="button" @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
|
164
164
|
<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line> <path class="ql-even ql-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path> <path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path> </svg>
|
|
165
165
|
</button>
|
|
166
166
|
</div>
|
|
@@ -233,6 +233,16 @@ export default {
|
|
|
233
233
|
dialogVisible:false,
|
|
234
234
|
}),
|
|
235
235
|
|
|
236
|
+
watch: {
|
|
237
|
+
modelValue: {
|
|
238
|
+
handler(val) {
|
|
239
|
+
if (this.hold !== val) {
|
|
240
|
+
this.setValue();
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
},
|
|
244
|
+
},
|
|
245
|
+
|
|
236
246
|
methods: {
|
|
237
247
|
setValue() {
|
|
238
248
|
const temp =
|
|
@@ -240,6 +250,7 @@ export default {
|
|
|
240
250
|
? `<p>${this.modelValue}</p>`
|
|
241
251
|
: this.modelValue;
|
|
242
252
|
this.editor.commands.setContent(temp);
|
|
253
|
+
this.hold = temp;
|
|
243
254
|
|
|
244
255
|
|
|
245
256
|
},
|
|
@@ -320,7 +331,10 @@ export default {
|
|
|
320
331
|
this.setValue();
|
|
321
332
|
|
|
322
333
|
this.editor.on('blur', ({ editor, event }) => {
|
|
323
|
-
this
|
|
334
|
+
if(this.hold !== event.srcElement.innerHTML) {
|
|
335
|
+
this.hold = event.srcElement.innerHTML;
|
|
336
|
+
this.$emit("update:modelValue", this.hold);
|
|
337
|
+
}
|
|
324
338
|
})
|
|
325
339
|
},
|
|
326
340
|
};
|