pxx-vue-quill 1.0.21 → 1.0.23
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/dist/vue-quill.cjs.js +282 -155
- package/dist/vue-quill.cjs.prod.js +2 -2
- package/dist/vue-quill.esm-browser.js +597 -462
- package/dist/vue-quill.esm-browser.prod.js +2 -2
- package/dist/vue-quill.esm-bundler.js +283 -156
- package/dist/vue-quill.esm-bundler.prod.js +2 -2
- package/dist/vue-quill.global.js +282 -155
- package/dist/vue-quill.global.prod.js +2 -2
- package/package.json +1 -1
package/dist/vue-quill.cjs.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Copyright (c) 2025 Pxx-Team
|
|
9
9
|
* Released under the MIT license
|
|
10
|
-
* Date: 2025-08-
|
|
10
|
+
* Date: 2025-08-26T09:54:33.439Z
|
|
11
11
|
*/
|
|
12
12
|
'use strict';
|
|
13
13
|
|
|
@@ -52,6 +52,135 @@ const toolbarOptions = {
|
|
|
52
52
|
]
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
+
const MoreToolbar = vue.defineComponent({
|
|
56
|
+
name: 'MoreToolbar',
|
|
57
|
+
props: {
|
|
58
|
+
editorKey: {
|
|
59
|
+
type: String,
|
|
60
|
+
required: true,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
emits: ['toolClick'],
|
|
64
|
+
setup(props, { emit }) {
|
|
65
|
+
const showMoreTools = vue.ref(false);
|
|
66
|
+
const moreButtonClick = () => {
|
|
67
|
+
showMoreTools.value = !showMoreTools.value;
|
|
68
|
+
};
|
|
69
|
+
return () => vue.h('div', {
|
|
70
|
+
id: 'toolbar-' + props.editorKey
|
|
71
|
+
}, [
|
|
72
|
+
vue.h('div', {
|
|
73
|
+
class: {
|
|
74
|
+
'short-tools': true,
|
|
75
|
+
'collapse': showMoreTools.value
|
|
76
|
+
}
|
|
77
|
+
}, [
|
|
78
|
+
// 第一组:基础格式工具
|
|
79
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
80
|
+
// 粗体按钮
|
|
81
|
+
vue.h('button', {
|
|
82
|
+
class: 'ql-bold',
|
|
83
|
+
type: 'button',
|
|
84
|
+
}, ''),
|
|
85
|
+
// 斜体按钮
|
|
86
|
+
vue.h('button', {
|
|
87
|
+
class: 'ql-italic',
|
|
88
|
+
type: 'button'
|
|
89
|
+
}, ''),
|
|
90
|
+
// 下划线按钮
|
|
91
|
+
vue.h('button', {
|
|
92
|
+
class: 'ql-underline',
|
|
93
|
+
type: 'button'
|
|
94
|
+
}, '')
|
|
95
|
+
]),
|
|
96
|
+
// 第二组:颜色选择器
|
|
97
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
98
|
+
vue.h('select', {
|
|
99
|
+
class: 'ql-color ql-picker ql-color-picker ql-expanded',
|
|
100
|
+
type: 'button'
|
|
101
|
+
}, [
|
|
102
|
+
vue.h('span', { class: 'ql-picker-label' }, ''),
|
|
103
|
+
vue.h('div', { class: 'ql-picker-options' })
|
|
104
|
+
]),
|
|
105
|
+
]),
|
|
106
|
+
// 第三组:链接工具
|
|
107
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
108
|
+
vue.h('button', {
|
|
109
|
+
class: 'ql-link',
|
|
110
|
+
type: 'button'
|
|
111
|
+
}, '')
|
|
112
|
+
]),
|
|
113
|
+
// 第四组:更多按钮
|
|
114
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
115
|
+
vue.h('button', {
|
|
116
|
+
class: 'ql-more mr-0',
|
|
117
|
+
type: 'button',
|
|
118
|
+
onClick: moreButtonClick
|
|
119
|
+
}, '')
|
|
120
|
+
])
|
|
121
|
+
]),
|
|
122
|
+
vue.h('div', {
|
|
123
|
+
class: {
|
|
124
|
+
"more-tools": true,
|
|
125
|
+
"collapse": showMoreTools.value
|
|
126
|
+
}, style: { display: showMoreTools.value ? 'block' : 'none' }
|
|
127
|
+
}, [
|
|
128
|
+
vue.h('div', { class: "more-tools-item" }, [
|
|
129
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
130
|
+
vue.h('button', {
|
|
131
|
+
class: 'ql-list',
|
|
132
|
+
value: 'ordered',
|
|
133
|
+
type: 'button'
|
|
134
|
+
}, ''),
|
|
135
|
+
vue.h('button', {
|
|
136
|
+
class: 'ql-list',
|
|
137
|
+
value: 'bullet',
|
|
138
|
+
type: 'button'
|
|
139
|
+
}, '')
|
|
140
|
+
]),
|
|
141
|
+
// 第二组:图片工具
|
|
142
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
143
|
+
vue.h('button', {
|
|
144
|
+
class: 'ql-image',
|
|
145
|
+
type: 'button'
|
|
146
|
+
}, '')
|
|
147
|
+
]),
|
|
148
|
+
// 第三组:撤销和重做
|
|
149
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
150
|
+
vue.h('button', {
|
|
151
|
+
class: 'ql-undo',
|
|
152
|
+
type: 'button',
|
|
153
|
+
onClick: () => emit('toolClick', 'undo')
|
|
154
|
+
}, ''),
|
|
155
|
+
vue.h('button', {
|
|
156
|
+
class: 'ql-redo',
|
|
157
|
+
type: 'button',
|
|
158
|
+
onClick: () => emit('toolClick', 'redo')
|
|
159
|
+
}, '')
|
|
160
|
+
]),
|
|
161
|
+
// 第四组:数学工具
|
|
162
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
163
|
+
vue.h('button', {
|
|
164
|
+
class: 'ql-math mr-0',
|
|
165
|
+
type: 'button',
|
|
166
|
+
onClick: () => emit('toolClick', 'math')
|
|
167
|
+
}, '')
|
|
168
|
+
])
|
|
169
|
+
]),
|
|
170
|
+
vue.h('div', {}, [
|
|
171
|
+
vue.h('span', { class: 'ql-formats' }, [
|
|
172
|
+
vue.h('button', {
|
|
173
|
+
class: 'ql-ocr',
|
|
174
|
+
type: 'button',
|
|
175
|
+
onClick: () => emit('toolClick', 'ocr')
|
|
176
|
+
}, '')
|
|
177
|
+
])
|
|
178
|
+
])
|
|
179
|
+
])
|
|
180
|
+
]);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
|
|
55
184
|
// 加粗
|
|
56
185
|
const boldSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M6.794999938146972,7.7800002288818355L9.045000038146974,7.7800002288818355Q9.855000038146972,7.7800002288818355,10.230000038146972,7.442500128881836Q10.605000038146972,7.105000028881836,10.605000038146972,6.505000128881836Q10.605000038146972,6.114999728881836,10.440000038146973,5.860000628881836Q10.275000138146972,5.6050005288818365,9.929999838146973,5.470000228881836Q9.585000038146973,5.335000028881836,9.045000038146974,5.335000028881836L7.139999938146973,5.335000028881836L7.139999938146973,3.385000228881836L9.045000038146974,3.385000228881836Q10.034999838146973,3.385000228881836,10.852499938146973,3.797500608881836Q11.670000038146974,4.2100000388818355,12.142499938146972,4.922500628881836Q12.614999738146974,5.635000228881836,12.614999738146974,6.505000128881836Q12.614999738146974,7.375000028881836,12.142499938146972,8.042500028881836Q11.670000038146974,8.710000028881836,10.860000138146972,9.070000128881837Q10.050000238146973,9.430000328881835,9.045000038146974,9.430000328881835L6.794999938146972,9.430000328881835L6.794999938146972,7.7800002288818355ZM7.139999938146973,12.550000228881835L9.329999938146972,12.550000228881835Q9.900000138146972,12.550000228881835,10.327499838146974,12.354999528881836Q10.755000138146972,12.159999828881835,10.987500238146973,11.807499928881835Q11.219999838146972,11.454999928881836,11.219999838146972,11.020000428881836Q11.219999838146972,10.600000428881836,10.987500238146973,10.232500028881836Q10.755000138146972,9.864999728881836,10.327499838146974,9.647500028881836Q9.900000138146972,9.430000328881835,9.329999938146972,9.430000328881835L6.975000038146972,9.430000328881835L6.975000038146972,7.7800002288818355L9.329999938146972,7.7800002288818355Q10.349999938146972,7.7800002288818355,11.250000038146972,8.200000328881835Q12.149999638146973,8.620000328881837,12.690000538146972,9.362500228881835Q13.229999538146973,10.104999528881836,13.229999538146973,11.034999828881837Q13.229999538146973,11.949999828881836,12.690000538146972,12.752500528881836Q12.149999638146973,13.555000228881836,11.250000038146972,14.027500228881836Q10.349999938146972,14.500000228881836,9.329999938146972,14.500000228881836L7.139999938146973,14.500000228881836L7.139999938146973,12.550000228881835ZM7.064999938146973,14.500000228881836Q6.284999968146972,14.500000228881836,5.872500058146973,14.095000228881837Q5.460000038146973,13.689999228881836,5.460000038146973,12.895000428881836L5.460000038146973,4.989999728881836Q5.460000038146973,4.195000648881836,5.872500058146973,3.789999958881836Q6.284999968146972,3.385000228881836,7.064999938146973,3.385000228881836L7.469999838146973,3.385000228881836L7.469999838146973,14.500000228881836L7.064999938146973,14.500000228881836Z" fill="#555555" fill-opacity="1"/></g></g></svg>`;
|
|
57
186
|
// 斜体
|
|
@@ -70,112 +199,36 @@ const redoSVG = `<svg t="1756107908999" class="icon" viewBox="0 0 1024 1024" ver
|
|
|
70
199
|
const ocrSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M3.0000245140625,2.6000244140625L5.5000243140625,2.6000244140625C5.8313951140625,2.6000244140625,6.1000242140625,2.3313953240625,6.1000242140625,2.0000244340625C6.1000242140625,1.6686535440624999,5.8313951140625,1.4000244140625,5.5000243140625,1.4000244140625L3.0000245140625,1.4000244140625Q2.3372827740625,1.4000244140625,1.8686535940625,1.8686535940625Q1.4000244140625,2.3372827740625,1.4000244140625,3.0000245140625L1.4000244140625,5.5000243140625C1.4000244140625,5.8313951140625,1.6686535440624999,6.1000242140625,2.0000244340625,6.1000242140625C2.3313953240625,6.1000242140625,2.6000244140625,5.8313951140625,2.6000244140625,5.5000243140625L2.6000244140625,3.0000245140625Q2.6000244140625,2.6000244140625,3.0000245140625,2.6000244140625ZM12.5000244140625,1.4000244140625L15.0000244140625,1.4000244140625Q15.6627664140625,1.4000244140625,16.1313954140625,1.8686538940625Q16.6000244140625,2.3372834940625,16.6000244140625,3.0000245140625L16.6000244140625,5.5000243140625C16.6000244140625,5.6591539140625,16.5368104140625,5.8117661140625,16.424288414062502,5.9242883140625C16.3117674140625,6.0368099140625,16.1591544140625,6.1000242140625,16.0000244140625,6.1000242140625C15.6686534140625,6.1000242140625,15.4000244140625,5.8313951140625,15.4000244140625,5.5000243140625L15.4000234140625,3.0000245140625Q15.4000234140625,2.6000244140625,15.0000244140625,2.6000244140625L12.5000244140625,2.6000244140625C12.1686534140625,2.6000244140625,11.9000244140625,2.3313953240625,11.9000244140625,2.0000244340625C11.9000244140625,1.6686535440624999,12.1686534140625,1.4000244140625,12.5000244140625,1.4000244140625ZM8.6239776140625,6.4719930140625C8.5439777140625,6.1512432140625,8.3999777140625,5.7421179140625,8.2479777140625,5.4212432140625L9.4959774140625,5.052368214062501C9.6959782140625,5.4293680140625,9.9199772140625,5.9346180140625,9.9999771140625,6.2714929140625L9.3519778140625,6.4719930140625L12.7119784140625,6.4719930140625L12.7119784140625,7.6079931140625L11.5039774140625,7.6079931140625C11.1279774140625,8.6968679140625,10.6159782140625,9.6014929140625,9.9599781140625,10.3461180140625C10.7599773140625,10.9224930140625,11.7279774140625,11.3468685140625,12.8879774140625,11.6029934140625C12.6239774140625,11.8592434140625,12.2799774140625,12.3716184140625,12.1039784140625,12.6918684140625C10.8719778140625,12.3716184140625,9.8719778140625,11.8752434140625,9.0479779140625,11.2107429140625C8.175977714062501,11.8992434140625,7.1199779140625,12.4036184140625,5.8559775140625,12.7558684140625C5.7279777140625,12.4757434140625,5.3759775140625,11.9312434140625,5.1519775140625,11.6591184140625C6.3759775140625,11.3868685140625,7.3839779140625,10.9706182140625,8.1839781140625,10.3781185140625C7.5199776140625,9.6094932140625,7.0079775140625,8.6888685140625,6.5919776140625,7.6079931140625L5.3279776140625,7.6079931140625L5.3279776140625,6.4719930140625L8.6239776140625,6.4719930140625ZM7.7999778140625,7.6079931140625C8.1119776140625,8.344617814062499,8.5359778140625,9.0011186140625,9.0719776140625,9.5694933140625C9.5439777140625,9.0251179140625,9.9199772140625,8.3766184140625,10.1919784140625,7.6079931140625L7.7999778140625,7.6079931140625ZM2.6000244140625,12.5000244140625L2.6000244140625,15.0000244140625Q2.6000244140625,15.4000234140625,3.0000245140625,15.4000234140625L5.5000243140625,15.4000234140625C5.8313951140625,15.4000244140625,6.1000242140625,15.6686534140625,6.1000242140625,16.0000244140625C6.1000242140625,16.3313964140625,5.8313951140625,16.6000254140625,5.5000243140625,16.6000254140625L5.4989548140625,16.6000244140625L3.0000245140625,16.6000244140625Q2.3372834940625,16.6000244140625,1.8686538940625,16.1313954140625Q1.4000244140625,15.6627664140625,1.4000244140625,15.0000244140625L1.4000244140625,12.5000244140625C1.4000244140625,12.1686534140625,1.6686535440624999,11.9000244140625,2.0000244340625,11.9000244140625C2.3313953240625,11.9000244140625,2.6000244140625,12.1686534140625,2.6000244140625,12.5000244140625ZM16.6000244140625,12.5010944140625L16.6000244140625,15.0000244140625Q16.6000244140625,15.6627654140625,16.1313954140625,16.1313954140625Q15.6627654140625,16.6000244140625,15.0000244140625,16.6000244140625L12.5000244140625,16.6000244140625C12.3408944140625,16.6000244140625,12.1882824140625,16.5368104140625,12.0757594140625,16.424288414062502C11.9632384140625,16.3117664140625,11.9000244140625,16.1591544140625,11.9000244140625,16.0000244140625C11.9000244140625,15.6686534140625,12.1686534140625,15.4000244140625,12.5000244140625,15.4000244140625L15.0000244140625,15.4000234140625Q15.4000234140625,15.4000234140625,15.4000234140625,15.0000244140625L15.4000234140625,12.5000244140625C15.4000244140625,12.1686534140625,15.6686534140625,11.9000244140625,16.0000244140625,11.9000244140625C16.3313964140625,11.9000244140625,16.6000254140625,12.1686534140625,16.6000254140625,12.5000244140625L16.6000244140625,12.5010944140625Z" fill-rule="evenodd" fill="#555555" fill-opacity="1"/></g></g></svg>`;
|
|
71
200
|
// 数学公式
|
|
72
201
|
const mathSVG = `<svg t="1756107836493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10608" width="18" height="18"><path d="M877.454222 856.177778q4.835556-4.835556 7.395556-11.093334 2.616889-6.257778 2.616889-13.084444 0-3.413333-0.625778-6.656-0.682667-3.299556-1.991111-6.428444-1.251556-3.072-3.128889-5.859556-1.877333-2.844444-4.266667-5.176889-2.332444-2.389333-5.12-4.266667-2.844444-1.877333-5.916444-3.128888-3.128889-1.308444-6.428445-1.934223-3.299556-0.682667-6.656-0.682666-6.826667 0-13.084444 2.616889-6.257778 2.56-11.036445 7.395555l-54.044444 53.987556H253.155556l325.688888-325.745778q2.389333-2.389333 4.266667-5.12 1.877333-2.844444 3.128889-5.916445 1.308444-3.128889 1.934222-6.428444 0.682667-3.299556 0.682667-6.656 0-3.413333-0.682667-6.656-0.625778-3.299556-1.934222-6.428444-1.251556-3.072-3.128889-5.859556-1.877333-2.844444-4.266667-5.176889L253.155556 162.133333h522.126222l53.930666 53.987556q4.835556 4.835556 11.093334 7.395555 6.257778 2.616889 13.084444 2.616889 3.413333 0 6.656-0.682666 3.299556-0.625778 6.428445-1.934223 3.072-1.251556 5.859555-3.128888 2.844444-1.877333 5.176889-4.266667 2.389333-2.389333 4.266667-5.12 1.877333-2.844444 3.128889-5.916445 1.308444-3.128889 1.934222-6.428444 0.682667-3.299556 0.682667-6.656 0-6.826667-2.616889-13.084444-2.56-6.257778-7.395556-11.036445l-64-64q-4.778667-4.835556-11.036444-7.395555-6.257778-2.616889-13.084445-2.616889H170.666667q-6.826667 0-13.084445 2.616889-6.257778 2.56-11.036444 7.395555-2.389333 2.389333-4.266667 5.12-1.877333 2.844444-3.128889 5.916445-1.308444 3.128889-1.934222 6.428444-0.682667 3.299556-0.682667 6.656 0 3.413333 0.682667 6.656 0.625778 3.299556 1.934222 6.428444 1.251556 3.072 3.128889 5.859556 1.877333 2.844444 4.266667 5.176889L506.311111 512l-359.822222 359.879111q-4.835556 4.778667-7.395556 11.036445-2.616889 6.257778-2.616889 13.084444 0 3.413333 0.682667 6.656 0.625778 3.299556 1.934222 6.428444 1.251556 3.072 3.128889 5.859556 1.877333 2.844444 4.266667 5.176889 2.389333 2.389333 5.12 4.266667 2.844444 1.877333 5.916444 3.128888 3.128889 1.308444 6.428445 1.991112 3.299556 0.625778 6.656 0.625777h618.666666q6.826667 0 13.084445-2.616889 6.257778-2.56 11.036444-7.395555l64-63.943111z" p-id="10609" fill="#555555"></path></svg>`;
|
|
73
|
-
// 无序列表
|
|
74
|
-
const listBulletSVG = `<svg viewbox="0 0 18 18"><line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"/><line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"/><line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"/><line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"/><line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"/><line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"/></svg>`;
|
|
75
|
-
// 有序列表
|
|
76
|
-
const listOrderedSVG = `<svg viewbox="0 0 18 18"><line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"/><line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"/><line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"/><line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"/><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 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 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"/></svg>`;
|
|
77
202
|
// 图片
|
|
78
203
|
const imageSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M1.87471507,3.83578219Q1.5,4.18540478,1.5,4.6875L1.5,14.312503Q1.50000006,14.814598,1.874716,15.16422Q2.23459671,15.5,2.73684216,15.5L15.263157,15.5Q15.765403,15.5,16.125284,15.164218Q16.499999000000003,14.814597,16.499999000000003,14.312501L16.499999000000003,4.6875Q16.499999000000003,4.18540342,16.125284999999998,3.83578214Q15.765404,3.5,15.263157,3.5L2.73684216,3.5Q2.23459646,3.5,1.87471507,3.83578219ZM2.5,14.312503L2.5,4.6875Q2.5,4.5,2.73684216,4.5L15.263157,4.5Q15.5,4.5,15.5,4.6875L15.5,14.312501Q15.5,14.5,15.263157,14.5L2.73684216,14.5Q2.5,14.5,2.5,14.312503Z" fill-rule="evenodd" fill="#555555" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><ellipse cx="5.4375" cy="7.4375" rx="0.4375" ry="0.4375" fill-opacity="0" stroke-opacity="1" stroke="#555555" fill="none" stroke-width="1" stroke-linecap="ROUND" stroke-linejoin="round" style="mix-blend-mode:passthrough"/></g><g><path d="M5.9053998,9.924615948146972L1.7143693,12.841608238146973Q1.61364189,12.911715538146973,1.55682093,13.020492338146973Q1.5,13.129269138146974,1.5,13.251992238146972L1.50000003,14.418008338146972Q1.50000003,14.876594038146973,1.84130602,15.195924738146973Q2.16843581,15.501991738146973,2.62437022,15.501991738146973L15.375628,15.501991738146973Q15.831564,15.501991738146973,16.158693,15.195924738146973Q16.5,14.876594038146973,16.5,14.418007838146973L16.5,13.251992238146972Q16.500000999999997,13.186988838146974,16.48338,13.124146438146973Q16.466759,13.061303638146972,16.434621,13.004799838146972Q16.402485,12.948296338146973,16.356969,12.901887938146972Q16.311453,12.855479738146972,16.255583,12.822251838146972L9.8796926,9.030259398146972Q9.842938400000001,9.008400078146973,9.8030057,8.993099628146974Q9.763073,8.977799118146972,9.721121799999999,8.969501908146972Q9.6791716,8.961204618146972,9.6364217,8.960151608146973Q9.5936708,8.959098578146973,9.551362000000001,8.965320438146973Q9.5090542,8.971542238146972,9.4684162,8.984858218146973Q9.427778199999999,8.998174158146973,9.3899918,9.018197478146973Q9.352206200000001,9.038220708146973,9.3183689,9.064369648146972Q9.284532500000001,9.090518598146973,9.2556267,9.122033748146972L7.6887164,10.830422738146973L6.4904227,9.934544588146972Q6.4273362,9.887379288146972,6.3528042,9.861893948146973Q6.2782726,9.836408678146972,6.1995153,9.835072038146972Q6.1207581,9.833735408146973,6.045404,9.856676968146973Q5.9700503000000005,9.879618528146972,5.9053998,9.924615948146972ZM2.5,13.513173138146973L2.50000006,14.418008338146972Q2.50000006,14.501992238146972,2.62437022,14.501992238146972L15.375628,14.501992238146972Q15.5,14.501992238146972,15.5,14.418007838146973L15.5,13.536368338146973L9.7178593,10.097503488146973L8.1200023,11.839632738146973Q8.0888524,11.873595438146973,8.052019600000001,11.901292338146973Q8.0151863,11.928988938146972,7.9739118,11.949486538146973Q7.9326363,11.969984038146972,7.88831,11.982591638146973Q7.8439837,11.995199238146974,7.7980995,11.999492138146973Q7.7522154,12.003785338146972,7.7063198,11.999619238146973Q7.6604242,11.995453338146973,7.6160631,11.982968338146973Q7.571702,11.970483338146973,7.5303702,11.950099938146973Q7.4890385,11.929716538146973,7.4521289,11.902122038146972L6.1805682,10.951467238146973L2.5,13.513173138146973Z" fill-rule="evenodd" fill="#555555" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>`;
|
|
79
204
|
|
|
80
|
-
const MoreTools = vue.defineComponent({
|
|
81
|
-
name: 'MoreTools',
|
|
82
|
-
props: {
|
|
83
|
-
// 传入toolbar的自定义style
|
|
84
|
-
toolbarStyle: {
|
|
85
|
-
type: Object,
|
|
86
|
-
required: false,
|
|
87
|
-
default: () => ({})
|
|
88
|
-
},
|
|
89
|
-
needCollapse: {
|
|
90
|
-
type: Boolean,
|
|
91
|
-
default: false
|
|
92
|
-
},
|
|
93
|
-
onToolClick: {
|
|
94
|
-
type: Function,
|
|
95
|
-
required: true
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
setup(props) {
|
|
99
|
-
// 渲染工具按钮
|
|
100
|
-
const renderToolButton = (tool) => {
|
|
101
|
-
if (typeof tool === 'string') {
|
|
102
|
-
// 根据工具名称获取对应的SVG图标
|
|
103
|
-
let iconSVG = '';
|
|
104
|
-
switch (tool) {
|
|
105
|
-
case 'image':
|
|
106
|
-
iconSVG = imageSVG;
|
|
107
|
-
break;
|
|
108
|
-
case 'undo':
|
|
109
|
-
iconSVG = undoSVG;
|
|
110
|
-
break;
|
|
111
|
-
case 'redo':
|
|
112
|
-
iconSVG = redoSVG;
|
|
113
|
-
break;
|
|
114
|
-
case 'ocr':
|
|
115
|
-
iconSVG = ocrSVG;
|
|
116
|
-
break;
|
|
117
|
-
case 'math':
|
|
118
|
-
iconSVG = mathSVG;
|
|
119
|
-
break;
|
|
120
|
-
default:
|
|
121
|
-
iconSVG = '';
|
|
122
|
-
}
|
|
123
|
-
return vue.h('button', {
|
|
124
|
-
class: `ql-${tool}`,
|
|
125
|
-
type: 'button',
|
|
126
|
-
onClick: () => props.onToolClick(tool)
|
|
127
|
-
}, [
|
|
128
|
-
iconSVG ? vue.h('span', { innerHTML: iconSVG }) : null
|
|
129
|
-
]);
|
|
130
|
-
}
|
|
131
|
-
else if (typeof tool === 'object' && tool !== null) {
|
|
132
|
-
const toolName = Object.keys(tool)[0];
|
|
133
|
-
const toolValue = Object.values(tool)[0];
|
|
134
|
-
let iconSVG = '';
|
|
135
|
-
if (toolName === 'list') {
|
|
136
|
-
iconSVG = toolValue === 'ordered' ? listOrderedSVG : listBulletSVG;
|
|
137
|
-
}
|
|
138
|
-
return vue.h('button', {
|
|
139
|
-
class: `ql-${toolName}`,
|
|
140
|
-
'data-value': toolValue,
|
|
141
|
-
type: 'button',
|
|
142
|
-
onClick: () => props.onToolClick(`${toolName}-${toolValue}`)
|
|
143
|
-
}, [
|
|
144
|
-
iconSVG ? vue.h('span', { innerHTML: iconSVG }) : null
|
|
145
|
-
]);
|
|
146
|
-
}
|
|
147
|
-
return null;
|
|
148
|
-
};
|
|
149
|
-
// 渲染工具组
|
|
150
|
-
const renderToolGroup = (tools) => {
|
|
151
|
-
return vue.h('span', {
|
|
152
|
-
class: 'ql-formats'
|
|
153
|
-
}, tools.map(tool => renderToolButton(tool)));
|
|
154
|
-
};
|
|
155
|
-
return () => vue.h('div', {
|
|
156
|
-
class: 'ql-toolbar ql-snow more-tools',
|
|
157
|
-
style: props.toolbarStyle
|
|
158
|
-
}, [
|
|
159
|
-
vue.h('div', {
|
|
160
|
-
class: 'more-tools-item'
|
|
161
|
-
}, [
|
|
162
|
-
// 渲染所有工具组
|
|
163
|
-
...toolbarOptions.extend.map(toolGroup => renderToolGroup(toolGroup)),
|
|
164
|
-
]),
|
|
165
|
-
vue.h('div', {}, [
|
|
166
|
-
renderToolGroup(['ocr'])
|
|
167
|
-
])
|
|
168
|
-
]);
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
|
|
172
205
|
const QuillEditor = vue.defineComponent({
|
|
173
206
|
name: 'QuillEditor',
|
|
174
207
|
inheritAttrs: false,
|
|
175
208
|
props: {
|
|
209
|
+
/**
|
|
210
|
+
* 编辑器的key
|
|
211
|
+
* 如果页面上存在多个编辑器的话需要传递
|
|
212
|
+
*/
|
|
213
|
+
editorKey: {
|
|
214
|
+
type: String,
|
|
215
|
+
required: true,
|
|
216
|
+
},
|
|
217
|
+
/**
|
|
218
|
+
* 编辑器内容
|
|
219
|
+
* 支持多种格式:字符串(HTML)、Delta对象、或undefined/null
|
|
220
|
+
* 当传入内容时,编辑器会显示对应的内容
|
|
221
|
+
*/
|
|
176
222
|
content: {
|
|
177
223
|
type: [String, Object],
|
|
178
224
|
},
|
|
225
|
+
/**
|
|
226
|
+
* 内容类型
|
|
227
|
+
* - 'delta': 使用Quill的Delta格式(默认)
|
|
228
|
+
* - 'html': 使用HTML字符串格式
|
|
229
|
+
* - 'text': 使用纯文本格式
|
|
230
|
+
* 影响内容的输入输出格式
|
|
231
|
+
*/
|
|
179
232
|
contentType: {
|
|
180
233
|
type: String,
|
|
181
234
|
default: 'delta',
|
|
@@ -183,28 +236,41 @@ const QuillEditor = vue.defineComponent({
|
|
|
183
236
|
return ['delta', 'html', 'text'].includes(value);
|
|
184
237
|
},
|
|
185
238
|
},
|
|
239
|
+
/**
|
|
240
|
+
* 是否启用编辑器
|
|
241
|
+
* true: 编辑器可编辑(默认)
|
|
242
|
+
* false: 编辑器禁用,不可编辑
|
|
243
|
+
*/
|
|
186
244
|
enable: {
|
|
187
245
|
type: Boolean,
|
|
188
246
|
default: true,
|
|
189
247
|
},
|
|
248
|
+
/**
|
|
249
|
+
* 是否只读模式
|
|
250
|
+
* true: 编辑器只读,不可编辑
|
|
251
|
+
* false: 编辑器可编辑(默认)
|
|
252
|
+
* 与enable的区别:readOnly只是禁止编辑,enable是禁用整个编辑器
|
|
253
|
+
*/
|
|
190
254
|
readOnly: {
|
|
191
255
|
type: Boolean,
|
|
192
256
|
default: false,
|
|
193
257
|
},
|
|
258
|
+
/**
|
|
259
|
+
* 占位符文本
|
|
260
|
+
* 当编辑器内容为空时显示的提示文字
|
|
261
|
+
* 默认显示"请输入内容"
|
|
262
|
+
*/
|
|
194
263
|
placeholder: {
|
|
195
264
|
type: String,
|
|
196
265
|
required: false,
|
|
197
266
|
default: "请输入内容"
|
|
198
267
|
},
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
type: Boolean,
|
|
206
|
-
default: false,
|
|
207
|
-
},
|
|
268
|
+
/**
|
|
269
|
+
* 工具栏模式
|
|
270
|
+
* - 'fixed-top': 工具栏固定在顶部,不随内容滚动
|
|
271
|
+
* - 'embedded': 工具栏嵌入在编辑器中,随内容滚动(默认)
|
|
272
|
+
* 影响工具栏的定位和滚动行为
|
|
273
|
+
*/
|
|
208
274
|
toolbarMode: {
|
|
209
275
|
type: String,
|
|
210
276
|
default: "embedded",
|
|
@@ -212,22 +278,45 @@ const QuillEditor = vue.defineComponent({
|
|
|
212
278
|
return ['fixed-top', 'embedded'].includes(value);
|
|
213
279
|
},
|
|
214
280
|
},
|
|
281
|
+
/**
|
|
282
|
+
* 是否需要折叠工具栏
|
|
283
|
+
* true: 显示折叠工具栏,点击"更多"展开(默认)
|
|
284
|
+
* false: 显示完整工具栏,不折叠
|
|
285
|
+
* 影响工具栏的显示方式
|
|
286
|
+
*/
|
|
215
287
|
needCollapse: {
|
|
216
288
|
type: Boolean,
|
|
217
|
-
default:
|
|
289
|
+
default: false,
|
|
218
290
|
},
|
|
219
|
-
|
|
291
|
+
/**
|
|
292
|
+
* 工具栏自定义样式
|
|
293
|
+
* 传入CSS样式对象,会应用到工具栏容器上
|
|
294
|
+
* 例如:{ 'background-color': '#f0f0f0', 'border-radius': '8px' }
|
|
295
|
+
* 支持所有CSS属性
|
|
296
|
+
*/
|
|
220
297
|
toolbarStyle: {
|
|
221
298
|
type: Object,
|
|
222
299
|
required: false,
|
|
223
300
|
default: () => ({})
|
|
224
301
|
},
|
|
225
|
-
|
|
302
|
+
/**
|
|
303
|
+
* 编辑器内容区域自定义样式
|
|
304
|
+
* 传入CSS样式对象,会应用到编辑器内容区域(.ql-editor)上
|
|
305
|
+
* 例如:{ 'font-size': '16px', 'line-height': '1.6' }
|
|
306
|
+
* 支持所有CSS属性
|
|
307
|
+
*/
|
|
226
308
|
editorStyle: {
|
|
227
309
|
type: Object,
|
|
228
310
|
required: false,
|
|
229
311
|
default: () => ({})
|
|
230
312
|
},
|
|
313
|
+
/**
|
|
314
|
+
* 编辑器主题
|
|
315
|
+
* - 'snow': 雪花主题,经典工具栏样式(默认)
|
|
316
|
+
* - 'bubble': 气泡主题,浮动工具栏样式
|
|
317
|
+
* - '': 无主题,不应用任何样式
|
|
318
|
+
* 影响编辑器的整体外观和交互方式
|
|
319
|
+
*/
|
|
231
320
|
theme: {
|
|
232
321
|
type: String,
|
|
233
322
|
default: 'snow',
|
|
@@ -235,6 +324,15 @@ const QuillEditor = vue.defineComponent({
|
|
|
235
324
|
return ['snow', 'bubble', ''].includes(value);
|
|
236
325
|
},
|
|
237
326
|
},
|
|
327
|
+
/**
|
|
328
|
+
* 工具栏配置
|
|
329
|
+
* 支持多种格式:
|
|
330
|
+
* - 字符串: 使用预定义的工具栏配置(如'full', 'short')
|
|
331
|
+
* - 数组: 自定义工具栏按钮数组
|
|
332
|
+
* - 对象: 自定义工具栏配置对象
|
|
333
|
+
* - 布尔值: true显示默认工具栏,false隐藏工具栏
|
|
334
|
+
* - 以'#'开头: 使用CSS选择器指定的DOM元素作为工具栏
|
|
335
|
+
*/
|
|
238
336
|
toolbar: {
|
|
239
337
|
type: [String, Array, Object, Boolean],
|
|
240
338
|
required: false,
|
|
@@ -249,6 +347,12 @@ const QuillEditor = vue.defineComponent({
|
|
|
249
347
|
return true;
|
|
250
348
|
},
|
|
251
349
|
},
|
|
350
|
+
/**
|
|
351
|
+
* Quill模块配置
|
|
352
|
+
* 支持单个模块或模块数组
|
|
353
|
+
* 每个模块包含:name(模块名)、module(模块对象)、options(模块选项)
|
|
354
|
+
* 默认包含blotFormatter模块,用于图片拖拽调整
|
|
355
|
+
*/
|
|
252
356
|
modules: {
|
|
253
357
|
type: Object,
|
|
254
358
|
required: false,
|
|
@@ -259,10 +363,21 @@ const QuillEditor = vue.defineComponent({
|
|
|
259
363
|
};
|
|
260
364
|
},
|
|
261
365
|
},
|
|
366
|
+
/**
|
|
367
|
+
* 编辑器选项配置
|
|
368
|
+
* 传入QuillOptionsStatic对象,用于配置编辑器的各种选项
|
|
369
|
+
* 这些选项会与默认选项合并,优先级高于默认选项
|
|
370
|
+
*/
|
|
262
371
|
options: {
|
|
263
372
|
type: Object,
|
|
264
373
|
required: false,
|
|
265
374
|
},
|
|
375
|
+
/**
|
|
376
|
+
* 全局选项配置
|
|
377
|
+
* 传入QuillOptionsStatic对象,用于配置编辑器的全局选项
|
|
378
|
+
* 这些选项会与默认选项合并,优先级最低
|
|
379
|
+
* 通常用于设置全局默认值
|
|
380
|
+
*/
|
|
266
381
|
globalOptions: {
|
|
267
382
|
type: Object,
|
|
268
383
|
required: false,
|
|
@@ -278,6 +393,7 @@ const QuillEditor = vue.defineComponent({
|
|
|
278
393
|
'ready',
|
|
279
394
|
'ocr',
|
|
280
395
|
'math',
|
|
396
|
+
'image',
|
|
281
397
|
],
|
|
282
398
|
setup: (props, ctx) => {
|
|
283
399
|
vue.onMounted(() => {
|
|
@@ -293,7 +409,6 @@ const QuillEditor = vue.defineComponent({
|
|
|
293
409
|
const editorWrapClass = vue.computed(() => {
|
|
294
410
|
return {
|
|
295
411
|
'quill-editor-container': true,
|
|
296
|
-
'need-border': props.needBorder,
|
|
297
412
|
'more-toolbar': showMoreToolbar.value,
|
|
298
413
|
'fixed-top': props.toolbarMode === 'fixed-top',
|
|
299
414
|
'embedded': props.toolbarMode === 'embedded',
|
|
@@ -345,6 +460,7 @@ const QuillEditor = vue.defineComponent({
|
|
|
345
460
|
toolbar.style.display = 'none';
|
|
346
461
|
}
|
|
347
462
|
const icons = Quill__default.import('ui/icons');
|
|
463
|
+
// 因为设计稿的图标样式和quill的图标样式不一致,所以需要手动替换
|
|
348
464
|
icons['bold'] = boldSVG;
|
|
349
465
|
icons['italic'] = italicSVG;
|
|
350
466
|
icons['underline'] = underlineSVG;
|
|
@@ -395,37 +511,42 @@ const QuillEditor = vue.defineComponent({
|
|
|
395
511
|
if (props.placeholder)
|
|
396
512
|
clientOptions.placeholder = props.placeholder;
|
|
397
513
|
if (props.toolbar && props.toolbar !== '') {
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
514
|
+
if (props.needCollapse) {
|
|
515
|
+
clientOptions.modules = {
|
|
516
|
+
toolbar: "#toolbar-" + props.editorKey,
|
|
517
|
+
};
|
|
518
|
+
}
|
|
519
|
+
else {
|
|
520
|
+
clientOptions.modules = {
|
|
521
|
+
toolbar: {
|
|
522
|
+
// 需要展开的话显示完整的工具栏
|
|
523
|
+
container: [
|
|
524
|
+
...toolbarOptions.full,
|
|
525
|
+
],
|
|
526
|
+
handlers: {
|
|
527
|
+
redo: function () {
|
|
528
|
+
var _a;
|
|
529
|
+
(_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.redo();
|
|
530
|
+
},
|
|
531
|
+
undo: function () {
|
|
532
|
+
var _a;
|
|
533
|
+
(_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
|
|
534
|
+
},
|
|
535
|
+
ocr: function () {
|
|
536
|
+
// 按钮点击逻辑
|
|
537
|
+
ctx.emit('ocr');
|
|
538
|
+
},
|
|
539
|
+
math: function () {
|
|
540
|
+
// 按钮点击逻辑
|
|
541
|
+
ctx.emit('math');
|
|
542
|
+
},
|
|
543
|
+
more: function () {
|
|
544
|
+
showMoreToolbar.value = !showMoreToolbar.value;
|
|
545
|
+
}
|
|
422
546
|
},
|
|
423
|
-
more: function () {
|
|
424
|
-
showMoreToolbar.value = !showMoreToolbar.value;
|
|
425
|
-
}
|
|
426
547
|
},
|
|
427
|
-
}
|
|
428
|
-
}
|
|
548
|
+
};
|
|
549
|
+
}
|
|
429
550
|
}
|
|
430
551
|
if (props.modules) {
|
|
431
552
|
const modules = (() => {
|
|
@@ -469,7 +590,6 @@ const QuillEditor = vue.defineComponent({
|
|
|
469
590
|
};
|
|
470
591
|
const handleTextChange = (delta, oldContents, source) => {
|
|
471
592
|
internalModel = maybeClone(getContents());
|
|
472
|
-
// Update v-model:content when text changes
|
|
473
593
|
if (!internalModelEquals(props.content)) {
|
|
474
594
|
ctx.emit('update:content', internalModel);
|
|
475
595
|
}
|
|
@@ -586,6 +706,23 @@ const QuillEditor = vue.defineComponent({
|
|
|
586
706
|
initialize();
|
|
587
707
|
});
|
|
588
708
|
};
|
|
709
|
+
const moreToolbarToolClick = (tool) => {
|
|
710
|
+
var _a, _b;
|
|
711
|
+
if (!quill)
|
|
712
|
+
return;
|
|
713
|
+
if (tool === 'undo') {
|
|
714
|
+
(_a = quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
|
|
715
|
+
}
|
|
716
|
+
else if (tool === 'redo') {
|
|
717
|
+
(_b = quill.getModule('history')) === null || _b === void 0 ? void 0 : _b.redo();
|
|
718
|
+
}
|
|
719
|
+
else if (tool === 'ocr') {
|
|
720
|
+
ctx.emit('ocr');
|
|
721
|
+
}
|
|
722
|
+
else if (tool === 'math') {
|
|
723
|
+
ctx.emit('math');
|
|
724
|
+
}
|
|
725
|
+
};
|
|
589
726
|
vue.watch(() => props.content, (newContent) => {
|
|
590
727
|
if (!quill || !newContent || internalModelEquals(newContent))
|
|
591
728
|
return;
|
|
@@ -615,30 +752,20 @@ const QuillEditor = vue.defineComponent({
|
|
|
615
752
|
reinit,
|
|
616
753
|
editorWrapClass,
|
|
617
754
|
showMoreToolbar,
|
|
755
|
+
moreToolbarToolClick
|
|
618
756
|
};
|
|
619
757
|
},
|
|
620
758
|
render() {
|
|
621
759
|
return [
|
|
622
760
|
vue.h('div', { class: this.editorWrapClass }, [
|
|
623
761
|
// this.$slots.toolbar?.(), // 工具栏内容固定
|
|
624
|
-
// 当 needCollapse 为 false 时,显示
|
|
625
|
-
this.
|
|
762
|
+
// 当 needCollapse 为 false 时,显示 MoreToolbar 组件
|
|
763
|
+
this.$props.needCollapse && vue.h(MoreToolbar, {
|
|
764
|
+
editorKey: this.$props.editorKey,
|
|
626
765
|
needCollapse: this.needCollapse,
|
|
627
766
|
toolbarStyle: this.$props.toolbarStyle,
|
|
628
767
|
onToolClick: (tool) => {
|
|
629
|
-
|
|
630
|
-
if (tool === 'undo') {
|
|
631
|
-
(_b = (_a = this.getQuill()) === null || _a === void 0 ? void 0 : _a.getModule('history')) === null || _b === void 0 ? void 0 : _b.undo();
|
|
632
|
-
}
|
|
633
|
-
else if (tool === 'redo') {
|
|
634
|
-
(_d = (_c = this.getQuill()) === null || _c === void 0 ? void 0 : _c.getModule('history')) === null || _d === void 0 ? void 0 : _d.redo();
|
|
635
|
-
}
|
|
636
|
-
else if (tool === 'ocr') {
|
|
637
|
-
this.$emit('ocr');
|
|
638
|
-
}
|
|
639
|
-
else if (tool === 'math') {
|
|
640
|
-
this.$emit('math');
|
|
641
|
-
}
|
|
768
|
+
this.moreToolbarToolClick(tool);
|
|
642
769
|
}
|
|
643
770
|
}),
|
|
644
771
|
vue.h('div', {
|