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.
Files changed (9) hide show
  1. package/dist/vue-quill.cjs.js +282 -155
  2. package/dist/vue-quill.cjs.prod.js +2 -2
  3. package/dist/vue-quill.esm-browser.js +597 -462
  4. package/dist/vue-quill.esm-browser.prod.js +2 -2
  5. package/dist/vue-quill.esm-bundler.js +283 -156
  6. package/dist/vue-quill.esm-bundler.prod.js +2 -2
  7. package/dist/vue-quill.global.js +282 -155
  8. package/dist/vue-quill.global.prod.js +2 -2
  9. package/package.json +1 -1
package/dist/vue-quill.esm-bundler.js CHANGED
@@ -7,13 +7,13 @@
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:54:33.439Z
11
11
  */
12
12
  import Quill from 'quill';
13
13
  export { default as Quill } from 'quill';
14
14
  import Delta from 'quill-delta';
15
15
  export { default as Delta } from 'quill-delta';
16
- import { defineComponent, h, onMounted, onBeforeUnmount, ref, computed, watch, nextTick } from 'vue';
16
+ import { defineComponent, ref, h, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue';
17
17
  import BlotFormatter from 'quill-blot-formatter';
18
18
 
19
19
  const toolbarOptions = {
@@ -44,6 +44,135 @@ const toolbarOptions = {
44
44
  ]
45
45
  };
46
46
 
47
+ const MoreToolbar = defineComponent({
48
+ name: 'MoreToolbar',
49
+ props: {
50
+ editorKey: {
51
+ type: String,
52
+ required: true,
53
+ },
54
+ },
55
+ emits: ['toolClick'],
56
+ setup(props, { emit }) {
57
+ const showMoreTools = ref(false);
58
+ const moreButtonClick = () => {
59
+ showMoreTools.value = !showMoreTools.value;
60
+ };
61
+ return () => h('div', {
62
+ id: 'toolbar-' + props.editorKey
63
+ }, [
64
+ h('div', {
65
+ class: {
66
+ 'short-tools': true,
67
+ 'collapse': showMoreTools.value
68
+ }
69
+ }, [
70
+ // 第一组：基础格式工具
71
+ h('span', { class: 'ql-formats' }, [
72
+ // 粗体按钮
73
+ h('button', {
74
+ class: 'ql-bold',
75
+ type: 'button',
76
+ }, ''),
77
+ // 斜体按钮
78
+ h('button', {
79
+ class: 'ql-italic',
80
+ type: 'button'
81
+ }, ''),
82
+ // 下划线按钮
83
+ h('button', {
84
+ class: 'ql-underline',
85
+ type: 'button'
86
+ }, '')
87
+ ]),
88
+ // 第二组：颜色选择器
89
+ h('span', { class: 'ql-formats' }, [
90
+ h('select', {
91
+ class: 'ql-color ql-picker ql-color-picker ql-expanded',
92
+ type: 'button'
93
+ }, [
94
+ h('span', { class: 'ql-picker-label' }, ''),
95
+ h('div', { class: 'ql-picker-options' })
96
+ ]),
97
+ ]),
98
+ // 第三组：链接工具
99
+ h('span', { class: 'ql-formats' }, [
100
+ h('button', {
101
+ class: 'ql-link',
102
+ type: 'button'
103
+ }, '')
104
+ ]),
105
+ // 第四组：更多按钮
106
+ h('span', { class: 'ql-formats' }, [
107
+ h('button', {
108
+ class: 'ql-more mr-0',
109
+ type: 'button',
110
+ onClick: moreButtonClick
111
+ }, '')
112
+ ])
113
+ ]),
114
+ h('div', {
115
+ class: {
116
+ "more-tools": true,
117
+ "collapse": showMoreTools.value
118
+ }, style: { display: showMoreTools.value ? 'block' : 'none' }
119
+ }, [
120
+ h('div', { class: "more-tools-item" }, [
121
+ h('span', { class: 'ql-formats' }, [
122
+ h('button', {
123
+ class: 'ql-list',
124
+ value: 'ordered',
125
+ type: 'button'
126
+ }, ''),
127
+ h('button', {
128
+ class: 'ql-list',
129
+ value: 'bullet',
130
+ type: 'button'
131
+ }, '')
132
+ ]),
133
+ // 第二组：图片工具
134
+ h('span', { class: 'ql-formats' }, [
135
+ h('button', {
136
+ class: 'ql-image',
137
+ type: 'button'
138
+ }, '')
139
+ ]),
140
+ // 第三组：撤销和重做
141
+ h('span', { class: 'ql-formats' }, [
142
+ h('button', {
143
+ class: 'ql-undo',
144
+ type: 'button',
145
+ onClick: () => emit('toolClick', 'undo')
146
+ }, ''),
147
+ h('button', {
148
+ class: 'ql-redo',
149
+ type: 'button',
150
+ onClick: () => emit('toolClick', 'redo')
151
+ }, '')
152
+ ]),
153
+ // 第四组：数学工具
154
+ h('span', { class: 'ql-formats' }, [
155
+ h('button', {
156
+ class: 'ql-math mr-0',
157
+ type: 'button',
158
+ onClick: () => emit('toolClick', 'math')
159
+ }, '')
160
+ ])
161
+ ]),
162
+ h('div', {}, [
163
+ h('span', { class: 'ql-formats' }, [
164
+ h('button', {
165
+ class: 'ql-ocr',
166
+ type: 'button',
167
+ onClick: () => emit('toolClick', 'ocr')
168
+ }, '')
169
+ ])
170
+ ])
171
+ ])
172
+ ]);
173
+ }
174
+ });
175
+
47
176
  // 加粗
48
177
  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>`;
49
178
  // 斜体
@@ -62,112 +191,36 @@ const redoSVG = `<svg t="1756107908999" class="icon" viewBox="0 0 1024 1024" ver
62
191
  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>`;
63
192
  // 数学公式
64
193
  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>`;
65
- // 无序列表
66
- 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>`;
67
- // 有序列表
68
- 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>`;
69
194
  // 图片
70
195
  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>`;
71
196
 
72
- const MoreTools = defineComponent({
73
- name: 'MoreTools',
74
- props: {
75
- // 传入toolbar的自定义style
76
- toolbarStyle: {
77
- type: Object,
78
- required: false,
79
- default: () => ({})
80
- },
81
- needCollapse: {
82
- type: Boolean,
83
- default: false
84
- },
85
- onToolClick: {
86
- type: Function,
87
- required: true
88
- }
89
- },
90
- setup(props) {
91
- // 渲染工具按钮
92
- const renderToolButton = (tool) => {
93
- if (typeof tool === 'string') {
94
- // 根据工具名称获取对应的SVG图标
95
- let iconSVG = '';
96
- switch (tool) {
97
- case 'image':
98
- iconSVG = imageSVG;
99
- break;
100
- case 'undo':
101
- iconSVG = undoSVG;
102
- break;
103
- case 'redo':
104
- iconSVG = redoSVG;
105
- break;
106
- case 'ocr':
107
- iconSVG = ocrSVG;
108
- break;
109
- case 'math':
110
- iconSVG = mathSVG;
111
- break;
112
- default:
113
- iconSVG = '';
114
- }
115
- return h('button', {
116
- class: `ql-${tool}`,
117
- type: 'button',
118
- onClick: () => props.onToolClick(tool)
119
- }, [
120
- iconSVG ? h('span', { innerHTML: iconSVG }) : null
121
- ]);
122
- }
123
- else if (typeof tool === 'object' && tool !== null) {
124
- const toolName = Object.keys(tool)[0];
125
- const toolValue = Object.values(tool)[0];
126
- let iconSVG = '';
127
- if (toolName === 'list') {
128
- iconSVG = toolValue === 'ordered' ? listOrderedSVG : listBulletSVG;
129
- }
130
- return h('button', {
131
- class: `ql-${toolName}`,
132
- 'data-value': toolValue,
133
- type: 'button',
134
- onClick: () => props.onToolClick(`${toolName}-${toolValue}`)
135
- }, [
136
- iconSVG ? h('span', { innerHTML: iconSVG }) : null
137
- ]);
138
- }
139
- return null;
140
- };
141
- // 渲染工具组
142
- const renderToolGroup = (tools) => {
143
- return h('span', {
144
- class: 'ql-formats'
145
- }, tools.map(tool => renderToolButton(tool)));
146
- };
147
- return () => h('div', {
148
- class: 'ql-toolbar ql-snow more-tools',
149
- style: props.toolbarStyle
150
- }, [
151
- h('div', {
152
- class: 'more-tools-item'
153
- }, [
154
- // 渲染所有工具组
155
- ...toolbarOptions.extend.map(toolGroup => renderToolGroup(toolGroup)),
156
- ]),
157
- h('div', {}, [
158
- renderToolGroup(['ocr'])
159
- ])
160
- ]);
161
- }
162
- });
163
-
164
197
  const QuillEditor = defineComponent({
165
198
  name: 'QuillEditor',
166
199
  inheritAttrs: false,
167
200
  props: {
201
+ /**
202
+ * 编辑器的key
203
+ * 如果页面上存在多个编辑器的话需要传递
204
+ */
205
+ editorKey: {
206
+ type: String,
207
+ required: true,
208
+ },
209
+ /**
210
+ * 编辑器内容
211
+ * 支持多种格式：字符串(HTML)、Delta对象、或undefined/null
212
+ * 当传入内容时，编辑器会显示对应的内容
213
+ */
168
214
  content: {
169
215
  type: [String, Object],
170
216
  },
217
+ /**
218
+ * 内容类型
219
+ * - 'delta': 使用Quill的Delta格式（默认）
220
+ * - 'html': 使用HTML字符串格式
221
+ * - 'text': 使用纯文本格式
222
+ * 影响内容的输入输出格式
223
+ */
171
224
  contentType: {
172
225
  type: String,
173
226
  default: 'delta',
@@ -175,28 +228,41 @@ const QuillEditor = defineComponent({
175
228
  return ['delta', 'html', 'text'].includes(value);
176
229
  },
177
230
  },
231
+ /**
232
+ * 是否启用编辑器
233
+ * true: 编辑器可编辑（默认）
234
+ * false: 编辑器禁用，不可编辑
235
+ */
178
236
  enable: {
179
237
  type: Boolean,
180
238
  default: true,
181
239
  },
240
+ /**
241
+ * 是否只读模式
242
+ * true: 编辑器只读，不可编辑
243
+ * false: 编辑器可编辑（默认）
244
+ * 与enable的区别：readOnly只是禁止编辑，enable是禁用整个编辑器
245
+ */
182
246
  readOnly: {
183
247
  type: Boolean,
184
248
  default: false,
185
249
  },
250
+ /**
251
+ * 占位符文本
252
+ * 当编辑器内容为空时显示的提示文字
253
+ * 默认显示"请输入内容"
254
+ */
186
255
  placeholder: {
187
256
  type: String,
188
257
  required: false,
189
258
  default: "请输入内容"
190
259
  },
191
- minHeight: {
192
- type: Number,
193
- required: false,
194
- default: 20,
195
- },
196
- needBorder: {
197
- type: Boolean,
198
- default: false,
199
- },
260
+ /**
261
+ * 工具栏模式
262
+ * - 'fixed-top': 工具栏固定在顶部，不随内容滚动
263
+ * - 'embedded': 工具栏嵌入在编辑器中，随内容滚动（默认）
264
+ * 影响工具栏的定位和滚动行为
265
+ */
200
266
  toolbarMode: {
201
267
  type: String,
202
268
  default: "embedded",
@@ -204,22 +270,45 @@ const QuillEditor = defineComponent({
204
270
  return ['fixed-top', 'embedded'].includes(value);
205
271
  },
206
272
  },
273
+ /**
274
+ * 是否需要折叠工具栏
275
+ * true: 显示折叠工具栏，点击"更多"展开（默认）
276
+ * false: 显示完整工具栏，不折叠
277
+ * 影响工具栏的显示方式
278
+ */
207
279
  needCollapse: {
208
280
  type: Boolean,
209
- default: true,
281
+ default: false,
210
282
  },
211
- // 传入toolbar的自定义style
283
+ /**
284
+ * 工具栏自定义样式
285
+ * 传入CSS样式对象，会应用到工具栏容器上
286
+ * 例如：{ 'background-color': '#f0f0f0', 'border-radius': '8px' }
287
+ * 支持所有CSS属性
288
+ */
212
289
  toolbarStyle: {
213
290
  type: Object,
214
291
  required: false,
215
292
  default: () => ({})
216
293
  },
217
- // 编辑器输入内容的自定义style
294
+ /**
295
+ * 编辑器内容区域自定义样式
296
+ * 传入CSS样式对象，会应用到编辑器内容区域(.ql-editor)上
297
+ * 例如：{ 'font-size': '16px', 'line-height': '1.6' }
298
+ * 支持所有CSS属性
299
+ */
218
300
  editorStyle: {
219
301
  type: Object,
220
302
  required: false,
221
303
  default: () => ({})
222
304
  },
305
+ /**
306
+ * 编辑器主题
307
+ * - 'snow': 雪花主题，经典工具栏样式（默认）
308
+ * - 'bubble': 气泡主题，浮动工具栏样式
309
+ * - '': 无主题，不应用任何样式
310
+ * 影响编辑器的整体外观和交互方式
311
+ */
223
312
  theme: {
224
313
  type: String,
225
314
  default: 'snow',
@@ -227,6 +316,15 @@ const QuillEditor = defineComponent({
227
316
  return ['snow', 'bubble', ''].includes(value);
228
317
  },
229
318
  },
319
+ /**
320
+ * 工具栏配置
321
+ * 支持多种格式：
322
+ * - 字符串: 使用预定义的工具栏配置（如'full', 'short'）
323
+ * - 数组: 自定义工具栏按钮数组
324
+ * - 对象: 自定义工具栏配置对象
325
+ * - 布尔值: true显示默认工具栏，false隐藏工具栏
326
+ * - 以'#'开头: 使用CSS选择器指定的DOM元素作为工具栏
327
+ */
230
328
  toolbar: {
231
329
  type: [String, Array, Object, Boolean],
232
330
  required: false,
@@ -241,6 +339,12 @@ const QuillEditor = defineComponent({
241
339
  return true;
242
340
  },
243
341
  },
342
+ /**
343
+ * Quill模块配置
344
+ * 支持单个模块或模块数组
345
+ * 每个模块包含：name(模块名)、module(模块对象)、options(模块选项)
346
+ * 默认包含blotFormatter模块，用于图片拖拽调整
347
+ */
244
348
  modules: {
245
349
  type: Object,
246
350
  required: false,
@@ -251,10 +355,21 @@ const QuillEditor = defineComponent({
251
355
  };
252
356
  },
253
357
  },
358
+ /**
359
+ * 编辑器选项配置
360
+ * 传入QuillOptionsStatic对象，用于配置编辑器的各种选项
361
+ * 这些选项会与默认选项合并，优先级高于默认选项
362
+ */
254
363
  options: {
255
364
  type: Object,
256
365
  required: false,
257
366
  },
367
+ /**
368
+ * 全局选项配置
369
+ * 传入QuillOptionsStatic对象，用于配置编辑器的全局选项
370
+ * 这些选项会与默认选项合并，优先级最低
371
+ * 通常用于设置全局默认值
372
+ */
258
373
  globalOptions: {
259
374
  type: Object,
260
375
  required: false,
@@ -270,6 +385,7 @@ const QuillEditor = defineComponent({
270
385
  'ready',
271
386
  'ocr',
272
387
  'math',
388
+ 'image',
273
389
  ],
274
390
  setup: (props, ctx) => {
275
391
  onMounted(() => {
@@ -285,7 +401,6 @@ const QuillEditor = defineComponent({
285
401
  const editorWrapClass = computed(() => {
286
402
  return {
287
403
  'quill-editor-container': true,
288
- 'need-border': props.needBorder,
289
404
  'more-toolbar': showMoreToolbar.value,
290
405
  'fixed-top': props.toolbarMode === 'fixed-top',
291
406
  'embedded': props.toolbarMode === 'embedded',
@@ -337,6 +452,7 @@ const QuillEditor = defineComponent({
337
452
  toolbar.style.display = 'none';
338
453
  }
339
454
  const icons = Quill.import('ui/icons');
455
+ // 因为设计稿的图标样式和quill的图标样式不一致，所以需要手动替换
340
456
  icons['bold'] = boldSVG;
341
457
  icons['italic'] = italicSVG;
342
458
  icons['underline'] = underlineSVG;
@@ -387,37 +503,42 @@ const QuillEditor = defineComponent({
387
503
  if (props.placeholder)
388
504
  clientOptions.placeholder = props.placeholder;
389
505
  if (props.toolbar && props.toolbar !== '') {
390
- clientOptions.modules = {
391
- toolbar: {
392
- // 需要展开的话显示完整的工具栏
393
- container: props.needCollapse ? [
394
- ...toolbarOptions.full,
395
- ] : [
396
- ...toolbarOptions.short,
397
- ],
398
- handlers: {
399
- redo: function () {
400
- var _a;
401
- (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.redo();
402
- },
403
- undo: function () {
404
- var _a;
405
- (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
406
- },
407
- ocr: function () {
408
- // 按钮点击逻辑
409
- ctx.emit('ocr');
410
- },
411
- math: function () {
412
- // 按钮点击逻辑
413
- ctx.emit('math');
506
+ if (props.needCollapse) {
507
+ clientOptions.modules = {
508
+ toolbar: "#toolbar-" + props.editorKey,
509
+ };
510
+ }
511
+ else {
512
+ clientOptions.modules = {
513
+ toolbar: {
514
+ // 需要展开的话显示完整的工具栏
515
+ container: [
516
+ ...toolbarOptions.full,
517
+ ],
518
+ handlers: {
519
+ redo: function () {
520
+ var _a;
521
+ (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.redo();
522
+ },
523
+ undo: function () {
524
+ var _a;
525
+ (_a = quill === null || quill === void 0 ? void 0 : quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
526
+ },
527
+ ocr: function () {
528
+ // 按钮点击逻辑
529
+ ctx.emit('ocr');
530
+ },
531
+ math: function () {
532
+ // 按钮点击逻辑
533
+ ctx.emit('math');
534
+ },
535
+ more: function () {
536
+ showMoreToolbar.value = !showMoreToolbar.value;
537
+ }
414
538
  },
415
- more: function () {
416
- showMoreToolbar.value = !showMoreToolbar.value;
417
- }
418
539
  },
419
- },
420
- };
540
+ };
541
+ }
421
542
  }
422
543
  if (props.modules) {
423
544
  const modules = (() => {
@@ -461,7 +582,6 @@ const QuillEditor = defineComponent({
461
582
  };
462
583
  const handleTextChange = (delta, oldContents, source) => {
463
584
  internalModel = maybeClone(getContents());
464
- // Update v-model:content when text changes
465
585
  if (!internalModelEquals(props.content)) {
466
586
  ctx.emit('update:content', internalModel);
467
587
  }
@@ -578,6 +698,23 @@ const QuillEditor = defineComponent({
578
698
  initialize();
579
699
  });
580
700
  };
701
+ const moreToolbarToolClick = (tool) => {
702
+ var _a, _b;
703
+ if (!quill)
704
+ return;
705
+ if (tool === 'undo') {
706
+ (_a = quill.getModule('history')) === null || _a === void 0 ? void 0 : _a.undo();
707
+ }
708
+ else if (tool === 'redo') {
709
+ (_b = quill.getModule('history')) === null || _b === void 0 ? void 0 : _b.redo();
710
+ }
711
+ else if (tool === 'ocr') {
712
+ ctx.emit('ocr');
713
+ }
714
+ else if (tool === 'math') {
715
+ ctx.emit('math');
716
+ }
717
+ };
581
718
  watch(() => props.content, (newContent) => {
582
719
  if (!quill || !newContent || internalModelEquals(newContent))
583
720
  return;
@@ -607,30 +744,20 @@ const QuillEditor = defineComponent({
607
744
  reinit,
608
745
  editorWrapClass,
609
746
  showMoreToolbar,
747
+ moreToolbarToolClick
610
748
  };
611
749
  },
612
750
  render() {
613
751
  return [
614
752
  h('div', { class: this.editorWrapClass }, [
615
753
  // this.$slots.toolbar?.(), // 工具栏内容固定
616
- // 当 needCollapse 为 false 时，显示 MoreTools 组件
617
- this.showMoreToolbar && h(MoreTools, {
754
+ // 当 needCollapse 为 false 时，显示 MoreToolbar 组件
755
+ this.$props.needCollapse && h(MoreToolbar, {
756
+ editorKey: this.$props.editorKey,
618
757
  needCollapse: this.needCollapse,
619
758
  toolbarStyle: this.$props.toolbarStyle,
620
759
  onToolClick: (tool) => {
621
- var _a, _b, _c, _d;
622
- if (tool === 'undo') {
623
- (_b = (_a = this.getQuill()) === null || _a === void 0 ? void 0 : _a.getModule('history')) === null || _b === void 0 ? void 0 : _b.undo();
624
- }
625
- else if (tool === 'redo') {
626
- (_d = (_c = this.getQuill()) === null || _c === void 0 ? void 0 : _c.getModule('history')) === null || _d === void 0 ? void 0 : _d.redo();
627
- }
628
- else if (tool === 'ocr') {
629
- this.$emit('ocr');
630
- }
631
- else if (tool === 'math') {
632
- this.$emit('math');
633
- }
760
+ this.moreToolbarToolClick(tool);
634
761
  }
635
762
  }),
636
763
  h('div', {