pxx-vue-quill 1.0.21 → 1.0.22

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.
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * Copyright (c) 2025 Pxx-Team
9
9
  * Released under the MIT license
10
- * Date: 2025-08-26T02:18:21.558Z
10
+ * Date: 2025-08-26T09:46:02.957Z
11
11
  */
12
12
  'use strict';
13
13
 
@@ -52,6 +52,129 @@ const toolbarOptions = {
52
52
  ]
53
53
  };
54
54
 
55
+ const MoreToolbar = vue.defineComponent({
56
+ name: 'MoreToolbar',
57
+ emits: ['toolClick'],
58
+ setup(props, { emit }) {
59
+ const showMoreTools = vue.ref(false);
60
+ const moreButtonClick = () => {
61
+ showMoreTools.value = !showMoreTools.value;
62
+ };
63
+ return () => vue.h('div', {
64
+ id: 'toolbar'
65
+ }, [
66
+ vue.h('div', {
67
+ class: {
68
+ 'short-tools': true,
69
+ 'collapse': showMoreTools.value
70
+ }
71
+ }, [
72
+ // 第一组:基础格式工具
73
+ vue.h('span', { class: 'ql-formats' }, [
74
+ // 粗体按钮
75
+ vue.h('button', {
76
+ class: 'ql-bold',
77
+ type: 'button',
78
+ }, ''),
79
+ // 斜体按钮
80
+ vue.h('button', {
81
+ class: 'ql-italic',
82
+ type: 'button'
83
+ }, ''),
84
+ // 下划线按钮
85
+ vue.h('button', {
86
+ class: 'ql-underline',
87
+ type: 'button'
88
+ }, '')
89
+ ]),
90
+ // 第二组:颜色选择器
91
+ vue.h('span', { class: 'ql-formats' }, [
92
+ vue.h('select', {
93
+ class: 'ql-color ql-picker ql-color-picker ql-expanded',
94
+ type: 'button'
95
+ }, [
96
+ vue.h('span', { class: 'ql-picker-label' }, ''),
97
+ vue.h('div', { class: 'ql-picker-options' })
98
+ ]),
99
+ ]),
100
+ // 第三组:链接工具
101
+ vue.h('span', { class: 'ql-formats' }, [
102
+ vue.h('button', {
103
+ class: 'ql-link',
104
+ type: 'button'
105
+ }, '')
106
+ ]),
107
+ // 第四组:更多按钮
108
+ vue.h('span', { class: 'ql-formats' }, [
109
+ vue.h('button', {
110
+ class: 'ql-more mr-0',
111
+ type: 'button',
112
+ onClick: moreButtonClick
113
+ }, '')
114
+ ])
115
+ ]),
116
+ vue.h('div', {
117
+ class: {
118
+ "more-tools": true,
119
+ "collapse": showMoreTools.value
120
+ }, style: { display: showMoreTools.value ? 'block' : 'none' }
121
+ }, [
122
+ vue.h('div', { class: "more-tools-item" }, [
123
+ vue.h('span', { class: 'ql-formats' }, [
124
+ vue.h('button', {
125
+ class: 'ql-list',
126
+ value: 'ordered',
127
+ type: 'button'
128
+ }, ''),
129
+ vue.h('button', {
130
+ class: 'ql-list',
131
+ value: 'bullet',
132
+ type: 'button'
133
+ }, '')
134
+ ]),
135
+ // 第二组:图片工具
136
+ vue.h('span', { class: 'ql-formats' }, [
137
+ vue.h('button', {
138
+ class: 'ql-image',
139
+ type: 'button'
140
+ }, '')
141
+ ]),
142
+ // 第三组:撤销和重做
143
+ vue.h('span', { class: 'ql-formats' }, [
144
+ vue.h('button', {
145
+ class: 'ql-undo',
146
+ type: 'button',
147
+ onClick: () => emit('toolClick', 'undo')
148
+ }, ''),
149
+ vue.h('button', {
150
+ class: 'ql-redo',
151
+ type: 'button',
152
+ onClick: () => emit('toolClick', 'redo')
153
+ }, '')
154
+ ]),
155
+ // 第四组:数学工具
156
+ vue.h('span', { class: 'ql-formats' }, [
157
+ vue.h('button', {
158
+ class: 'ql-math mr-0',
159
+ type: 'button',
160
+ onClick: () => emit('toolClick', 'math')
161
+ }, '')
162
+ ])
163
+ ]),
164
+ vue.h('div', {}, [
165
+ vue.h('span', { class: 'ql-formats' }, [
166
+ vue.h('button', {
167
+ class: 'ql-ocr',
168
+ type: 'button',
169
+ onClick: () => emit('toolClick', 'ocr')
170
+ }, '')
171
+ ])
172
+ ])
173
+ ])
174
+ ]);
175
+ }
176
+ });
177
+
55
178
  // 加粗
56
179
  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
180
  // 斜体
@@ -70,112 +193,28 @@ const redoSVG = `<svg t="1756107908999" class="icon" viewBox="0 0 1024 1024" ver
70
193
  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
194
  // 数学公式
72
195
  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
196
  // 图片
78
197
  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
198
 
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
199
  const QuillEditor = vue.defineComponent({
173
200
  name: 'QuillEditor',
174
201
  inheritAttrs: false,
175
202
  props: {
203
+ /**
204
+ * 编辑器内容
205
+ * 支持多种格式:字符串(HTML)、Delta对象、或undefined/null
206
+ * 当传入内容时,编辑器会显示对应的内容
207
+ */
176
208
  content: {
177
209
  type: [String, Object],
178
210
  },
211
+ /**
212
+ * 内容类型
213
+ * - 'delta': 使用Quill的Delta格式(默认)
214
+ * - 'html': 使用HTML字符串格式
215
+ * - 'text': 使用纯文本格式
216
+ * 影响内容的输入输出格式
217
+ */
179
218
  contentType: {
180
219
  type: String,
181
220
  default: 'delta',
@@ -183,28 +222,41 @@ const QuillEditor = vue.defineComponent({
183
222
  return ['delta', 'html', 'text'].includes(value);
184
223
  },
185
224
  },
225
+ /**
226
+ * 是否启用编辑器
227
+ * true: 编辑器可编辑(默认)
228
+ * false: 编辑器禁用,不可编辑
229
+ */
186
230
  enable: {
187
231
  type: Boolean,
188
232
  default: true,
189
233
  },
234
+ /**
235
+ * 是否只读模式
236
+ * true: 编辑器只读,不可编辑
237
+ * false: 编辑器可编辑(默认)
238
+ * 与enable的区别:readOnly只是禁止编辑,enable是禁用整个编辑器
239
+ */
190
240
  readOnly: {
191
241
  type: Boolean,
192
242
  default: false,
193
243
  },
244
+ /**
245
+ * 占位符文本
246
+ * 当编辑器内容为空时显示的提示文字
247
+ * 默认显示"请输入内容"
248
+ */
194
249
  placeholder: {
195
250
  type: String,
196
251
  required: false,
197
252
  default: "请输入内容"
198
253
  },
199
- minHeight: {
200
- type: Number,
201
- required: false,
202
- default: 20,
203
- },
204
- needBorder: {
205
- type: Boolean,
206
- default: false,
207
- },
254
+ /**
255
+ * 工具栏模式
256
+ * - 'fixed-top': 工具栏固定在顶部,不随内容滚动
257
+ * - 'embedded': 工具栏嵌入在编辑器中,随内容滚动(默认)
258
+ * 影响工具栏的定位和滚动行为
259
+ */
208
260
  toolbarMode: {
209
261
  type: String,
210
262
  default: "embedded",
@@ -212,22 +264,45 @@ const QuillEditor = vue.defineComponent({
212
264
  return ['fixed-top', 'embedded'].includes(value);
213
265
  },
214
266
  },
267
+ /**
268
+ * 是否需要折叠工具栏
269
+ * true: 显示折叠工具栏,点击"更多"展开(默认)
270
+ * false: 显示完整工具栏,不折叠
271
+ * 影响工具栏的显示方式
272
+ */
215
273
  needCollapse: {
216
274
  type: Boolean,
217
- default: true,
275
+ default: false,
218
276
  },
219
- // 传入toolbar的自定义style
277
+ /**
278
+ * 工具栏自定义样式
279
+ * 传入CSS样式对象,会应用到工具栏容器上
280
+ * 例如:{ 'background-color': '#f0f0f0', 'border-radius': '8px' }
281
+ * 支持所有CSS属性
282
+ */
220
283
  toolbarStyle: {
221
284
  type: Object,
222
285
  required: false,
223
286
  default: () => ({})
224
287
  },
225
- // 编辑器输入内容的自定义style
288
+ /**
289
+ * 编辑器内容区域自定义样式
290
+ * 传入CSS样式对象,会应用到编辑器内容区域(.ql-editor)上
291
+ * 例如:{ 'font-size': '16px', 'line-height': '1.6' }
292
+ * 支持所有CSS属性
293
+ */
226
294
  editorStyle: {
227
295
  type: Object,
228
296
  required: false,
229
297
  default: () => ({})
230
298
  },
299
+ /**
300
+ * 编辑器主题
301
+ * - 'snow': 雪花主题,经典工具栏样式(默认)
302
+ * - 'bubble': 气泡主题,浮动工具栏样式
303
+ * - '': 无主题,不应用任何样式
304
+ * 影响编辑器的整体外观和交互方式
305
+ */
231
306
  theme: {
232
307
  type: String,
233
308
  default: 'snow',
@@ -235,6 +310,15 @@ const QuillEditor = vue.defineComponent({
235
310
  return ['snow', 'bubble', ''].includes(value);
236
311
  },
237
312
  },
313
+ /**
314
+ * 工具栏配置
315
+ * 支持多种格式:
316
+ * - 字符串: 使用预定义的工具栏配置(如'full', 'short')
317
+ * - 数组: 自定义工具栏按钮数组
318
+ * - 对象: 自定义工具栏配置对象
319
+ * - 布尔值: true显示默认工具栏,false隐藏工具栏
320
+ * - 以'#'开头: 使用CSS选择器指定的DOM元素作为工具栏
321
+ */
238
322
  toolbar: {
239
323
  type: [String, Array, Object, Boolean],
240
324
  required: false,
@@ -249,6 +333,12 @@ const QuillEditor = vue.defineComponent({
249
333
  return true;
250
334
  },
251
335
  },
336
+ /**
337
+ * Quill模块配置
338
+ * 支持单个模块或模块数组
339
+ * 每个模块包含:name(模块名)、module(模块对象)、options(模块选项)
340
+ * 默认包含blotFormatter模块,用于图片拖拽调整
341
+ */
252
342
  modules: {
253
343
  type: Object,
254
344
  required: false,
@@ -259,10 +349,21 @@ const QuillEditor = vue.defineComponent({
259
349
  };
260
350
  },
261
351
  },
352
+ /**
353
+ * 编辑器选项配置
354
+ * 传入QuillOptionsStatic对象,用于配置编辑器的各种选项
355
+ * 这些选项会与默认选项合并,优先级高于默认选项
356
+ */
262
357
  options: {
263
358
  type: Object,
264
359
  required: false,
265
360
  },
361
+ /**
362
+ * 全局选项配置
363
+ * 传入QuillOptionsStatic对象,用于配置编辑器的全局选项
364
+ * 这些选项会与默认选项合并,优先级最低
365
+ * 通常用于设置全局默认值
366
+ */
266
367
  globalOptions: {
267
368
  type: Object,
268
369
  required: false,
@@ -278,6 +379,7 @@ const QuillEditor = vue.defineComponent({
278
379
  'ready',
279
380
  'ocr',
280
381
  'math',
382
+ 'image',
281
383
  ],
282
384
  setup: (props, ctx) => {
283
385
  vue.onMounted(() => {
@@ -293,7 +395,6 @@ const QuillEditor = vue.defineComponent({
293
395
  const editorWrapClass = vue.computed(() => {
294
396
  return {
295
397
  'quill-editor-container': true,
296
- 'need-border': props.needBorder,
297
398
  'more-toolbar': showMoreToolbar.value,
298
399
  'fixed-top': props.toolbarMode === 'fixed-top',
299
400
  'embedded': props.toolbarMode === 'embedded',
@@ -345,6 +446,7 @@ const QuillEditor = vue.defineComponent({
345
446
  toolbar.style.display = 'none';
346
447
  }
347
448
  const icons = Quill__default.import('ui/icons');
449
+ // 因为设计稿的图标样式和quill的图标样式不一致,所以需要手动替换
348
450
  icons['bold'] = boldSVG;
349
451
  icons['italic'] = italicSVG;
350
452
  icons['underline'] = underlineSVG;
@@ -395,37 +497,42 @@ const QuillEditor = vue.defineComponent({
395
497
  if (props.placeholder)
396
498
  clientOptions.placeholder = props.placeholder;
397
499
  if (props.toolbar && props.toolbar !== '') {
398
- clientOptions.modules = {
399
- toolbar: {
400
- // 需要展开的话显示完整的工具栏
401
- container: props.needCollapse ? [
402
- ...toolbarOptions.full,
403
- ] : [
404
- ...toolbarOptions.short,
405
- ],
406
- handlers: {
407
- redo: function () {
408
- var _a;
409
- (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.redo();
410
- },
411
- undo: function () {
412
- var _a;
413
- (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
414
- },
415
- ocr: function () {
416
- // 按钮点击逻辑
417
- ctx.emit('ocr');
418
- },
419
- math: function () {
420
- // 按钮点击逻辑
421
- ctx.emit('math');
500
+ if (props.needCollapse) {
501
+ clientOptions.modules = {
502
+ toolbar: "#toolbar",
503
+ };
504
+ }
505
+ else {
506
+ clientOptions.modules = {
507
+ toolbar: {
508
+ // 需要展开的话显示完整的工具栏
509
+ container: [
510
+ ...toolbarOptions.full,
511
+ ],
512
+ handlers: {
513
+ redo: function () {
514
+ var _a;
515
+ (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.redo();
516
+ },
517
+ undo: function () {
518
+ var _a;
519
+ (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
520
+ },
521
+ ocr: function () {
522
+ // 按钮点击逻辑
523
+ ctx.emit('ocr');
524
+ },
525
+ math: function () {
526
+ // 按钮点击逻辑
527
+ ctx.emit('math');
528
+ },
529
+ more: function () {
530
+ showMoreToolbar.value = !showMoreToolbar.value;
531
+ }
422
532
  },
423
- more: function () {
424
- showMoreToolbar.value = !showMoreToolbar.value;
425
- }
426
533
  },
427
- },
428
- };
534
+ };
535
+ }
429
536
  }
430
537
  if (props.modules) {
431
538
  const modules = (() => {
@@ -469,7 +576,6 @@ const QuillEditor = vue.defineComponent({
469
576
  };
470
577
  const handleTextChange = (delta, oldContents, source) => {
471
578
  internalModel = maybeClone(getContents());
472
- // Update v-model:content when text changes
473
579
  if (!internalModelEquals(props.content)) {
474
580
  ctx.emit('update:content', internalModel);
475
581
  }
@@ -586,6 +692,23 @@ const QuillEditor = vue.defineComponent({
586
692
  initialize();
587
693
  });
588
694
  };
695
+ const moreToolbarToolClick = (tool) => {
696
+ var _a, _b;
697
+ if (!quill)
698
+ return;
699
+ if (tool === 'undo') {
700
+ (_a = quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
701
+ }
702
+ else if (tool === 'redo') {
703
+ (_b = quill.getModule('history')) === null || _b === void 0 ? void 0 : _b.redo();
704
+ }
705
+ else if (tool === 'ocr') {
706
+ ctx.emit('ocr');
707
+ }
708
+ else if (tool === 'math') {
709
+ ctx.emit('math');
710
+ }
711
+ };
589
712
  vue.watch(() => props.content, (newContent) => {
590
713
  if (!quill || !newContent || internalModelEquals(newContent))
591
714
  return;
@@ -615,30 +738,19 @@ const QuillEditor = vue.defineComponent({
615
738
  reinit,
616
739
  editorWrapClass,
617
740
  showMoreToolbar,
741
+ moreToolbarToolClick
618
742
  };
619
743
  },
620
744
  render() {
621
745
  return [
622
746
  vue.h('div', { class: this.editorWrapClass }, [
623
747
  // this.$slots.toolbar?.(), // 工具栏内容固定
624
- // 当 needCollapse 为 false 时,显示 MoreTools 组件
625
- this.showMoreToolbar && vue.h(MoreTools, {
748
+ // 当 needCollapse 为 false 时,显示 MoreToolbar 组件
749
+ this.$props.needCollapse && vue.h(MoreToolbar, {
626
750
  needCollapse: this.needCollapse,
627
751
  toolbarStyle: this.$props.toolbarStyle,
628
752
  onToolClick: (tool) => {
629
- var _a, _b, _c, _d;
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
- }
753
+ this.moreToolbarToolClick(tool);
642
754
  }
643
755
  }),
644
756
  vue.h('div', {