adtec-core-package 2.3.1 → 2.3.3
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/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
:style="{
|
|
10
10
|
height: '100%',
|
|
11
11
|
width: '100%',
|
|
12
|
-
fontSize: '14px'
|
|
12
|
+
fontSize: '14px',
|
|
13
13
|
}"
|
|
14
14
|
/>
|
|
15
15
|
</el-flex>
|
|
@@ -52,120 +52,134 @@ const props = withDefaults(
|
|
|
52
52
|
editorConfig: {},
|
|
53
53
|
},
|
|
54
54
|
)
|
|
55
|
-
const model = defineModel({
|
|
55
|
+
const model = defineModel({
|
|
56
|
+
type: [String, null, undefined],
|
|
57
|
+
required: false,
|
|
58
|
+
default: null
|
|
59
|
+
})
|
|
56
60
|
const text = defineModel('text', {
|
|
57
61
|
type: String,
|
|
58
|
-
required: false
|
|
62
|
+
required: false,
|
|
59
63
|
})
|
|
60
64
|
//字体对照表
|
|
61
65
|
const fontSizes = [
|
|
62
|
-
{ name:
|
|
63
|
-
{ name:
|
|
64
|
-
{ name:
|
|
65
|
-
{ name:
|
|
66
|
-
{ name:
|
|
67
|
-
{ name:
|
|
68
|
-
{ name:
|
|
69
|
-
{ name:
|
|
70
|
-
{ name:
|
|
71
|
-
{ name:
|
|
72
|
-
{ name:
|
|
73
|
-
{ name:
|
|
74
|
-
{ name:
|
|
75
|
-
{ name:
|
|
76
|
-
{ name:
|
|
77
|
-
{ name:
|
|
78
|
-
]
|
|
66
|
+
{ name: '八号', pt: 5, px: 5 },
|
|
67
|
+
{ name: '七号', pt: 5.5, px: 6 },
|
|
68
|
+
{ name: '小六', pt: 6.5, px: 8 },
|
|
69
|
+
{ name: '六号', pt: 7.5, px: 9 },
|
|
70
|
+
{ name: '小五', pt: 9, px: 11 },
|
|
71
|
+
{ name: '五号', pt: 10.5, px: 12 },
|
|
72
|
+
{ name: '小四', pt: 12, px: 14 },
|
|
73
|
+
{ name: '四号', pt: 14, px: 16 },
|
|
74
|
+
{ name: '小三', pt: 15, px: 18 },
|
|
75
|
+
{ name: '三号', pt: 16, px: 19 },
|
|
76
|
+
{ name: '小二', pt: 18, px: 21 },
|
|
77
|
+
{ name: '二号', pt: 22, px: 26 },
|
|
78
|
+
{ name: '小一', pt: 24, px: 28 },
|
|
79
|
+
{ name: '一号', pt: 26, px: 30 },
|
|
80
|
+
{ name: '小初', pt: 36, px: 42 },
|
|
81
|
+
{ name: '初号', pt: 42, px: 49 },
|
|
82
|
+
]
|
|
79
83
|
function setDefaultPx(html: string) {
|
|
80
84
|
// 创建临时div用于解析HTML
|
|
81
|
-
const tempDiv = document.createElement('div')
|
|
82
|
-
tempDiv.innerHTML = html
|
|
85
|
+
const tempDiv = document.createElement('div')
|
|
86
|
+
tempDiv.innerHTML = html
|
|
83
87
|
// 获取所有p元素
|
|
84
|
-
const pElements = tempDiv.querySelectorAll('p')
|
|
88
|
+
const pElements = tempDiv.querySelectorAll('p')
|
|
85
89
|
|
|
86
|
-
pElements.forEach(p => {
|
|
90
|
+
pElements.forEach((p) => {
|
|
87
91
|
// 检查是否有内联样式设置了fontSize
|
|
88
|
-
const hasInlineFontSize = !!p.style.fontSize
|
|
92
|
+
const hasInlineFontSize = !!p.style.fontSize
|
|
89
93
|
// 只有当没有设置字体大小时才添加
|
|
90
94
|
if (!hasInlineFontSize) {
|
|
91
|
-
p.style.fontSize = '14px'
|
|
95
|
+
p.style.fontSize = '14px'
|
|
92
96
|
}
|
|
93
|
-
})
|
|
97
|
+
})
|
|
94
98
|
return tempDiv.innerHTML
|
|
95
99
|
}
|
|
96
100
|
function convertPxToPt(html: string) {
|
|
97
101
|
html = setDefaultPx(html)
|
|
98
|
-
const regex = /font-size: (\d+)px/g
|
|
102
|
+
const regex = /font-size: (\d+)px/g
|
|
99
103
|
return html.replace(regex, (match, pxValue) => {
|
|
100
|
-
const px = parseInt(pxValue, 10)
|
|
101
|
-
const entry = fontSizes.find(item => item.px === px)
|
|
104
|
+
const px = parseInt(pxValue, 10)
|
|
105
|
+
const entry = fontSizes.find((item) => item.px === px)
|
|
102
106
|
if (entry) {
|
|
103
|
-
return `font-size: ${entry.pt}pt
|
|
107
|
+
return `font-size: ${entry.pt}pt`
|
|
104
108
|
}
|
|
105
|
-
return match
|
|
106
|
-
})
|
|
109
|
+
return match
|
|
110
|
+
})
|
|
107
111
|
}
|
|
108
112
|
function convertPtToPx(html: string) {
|
|
109
|
-
const regex = /font-size: (\d+)pt/g
|
|
113
|
+
const regex = /font-size: (\d+)pt/g
|
|
110
114
|
return html.replace(regex, (match, ptValue) => {
|
|
111
|
-
const pt = parseFloat(ptValue)
|
|
112
|
-
const entry = fontSizes.find(item => item.pt === pt)
|
|
115
|
+
const pt = parseFloat(ptValue)
|
|
116
|
+
const entry = fontSizes.find((item) => item.pt === pt)
|
|
113
117
|
if (entry) {
|
|
114
|
-
return `font-size: ${entry.px}px
|
|
118
|
+
return `font-size: ${entry.px}px`
|
|
115
119
|
}
|
|
116
|
-
return match
|
|
117
|
-
})
|
|
120
|
+
return match
|
|
121
|
+
})
|
|
118
122
|
}
|
|
119
123
|
//默认的配置
|
|
120
124
|
const defaultConfig = {
|
|
121
125
|
placeholder: '请输入内容...',
|
|
122
126
|
draggable: false, // 禁止拖拽
|
|
123
|
-
toolbarExcludeKeys: [
|
|
127
|
+
toolbarExcludeKeys: [
|
|
128
|
+
'eraser',
|
|
129
|
+
'link',
|
|
130
|
+
'code',
|
|
131
|
+
'attachment',
|
|
132
|
+
'code-block',
|
|
133
|
+
'video',
|
|
134
|
+
'ai',
|
|
135
|
+
'quote',
|
|
136
|
+
'emoji',
|
|
137
|
+
],
|
|
124
138
|
textSelectionBubbleMenu: {
|
|
125
139
|
enable: true,
|
|
126
|
-
items: [
|
|
140
|
+
items: ['Bold', 'Italic', 'Underline', 'Strike', 'code', 'comment'],
|
|
127
141
|
},
|
|
128
142
|
image: {
|
|
129
143
|
uploaderEvent: {
|
|
130
144
|
onUploadBefore: (file, uploadUrl, headers) => {
|
|
131
145
|
if (file.size > 2 * 1024 * 1024) {
|
|
132
|
-
ElMessage.warning(
|
|
146
|
+
ElMessage.warning('图片大小不能超过2M')
|
|
133
147
|
return false
|
|
134
148
|
}
|
|
135
149
|
},
|
|
136
150
|
// onSuccess: (file, response) => {
|
|
137
151
|
// console.log('onSuccess', file, response)
|
|
138
152
|
// }
|
|
139
|
-
}
|
|
153
|
+
},
|
|
140
154
|
},
|
|
141
155
|
htmlPasteConfig: {
|
|
142
156
|
pasteProcessor: (html) => {
|
|
143
157
|
// return html;
|
|
144
158
|
// console.log('html:', html, 'xxxxxx', removeAllFontFamilyStyles(html))
|
|
145
159
|
return removeAllFontFamilyStyles(html)
|
|
146
|
-
}
|
|
160
|
+
},
|
|
147
161
|
},
|
|
148
|
-
fontSize:{
|
|
162
|
+
fontSize: {
|
|
149
163
|
defaultValue: ' ',
|
|
150
|
-
values:[
|
|
151
|
-
{name:
|
|
152
|
-
{name:
|
|
153
|
-
{name:
|
|
154
|
-
{name:
|
|
155
|
-
{name:
|
|
156
|
-
{name:
|
|
157
|
-
{name:
|
|
158
|
-
{name:
|
|
159
|
-
{name:
|
|
160
|
-
{name:
|
|
161
|
-
{name:
|
|
162
|
-
{name:
|
|
163
|
-
{name:
|
|
164
|
-
{name:
|
|
165
|
-
{name:
|
|
166
|
-
{name:
|
|
167
|
-
{name:
|
|
168
|
-
]
|
|
164
|
+
values: [
|
|
165
|
+
{ name: '小四', value: 14 },
|
|
166
|
+
{ name: '初号', value: 49 },
|
|
167
|
+
{ name: '小初', value: 42 },
|
|
168
|
+
{ name: '一号', value: 30 },
|
|
169
|
+
{ name: '小一', value: 28 },
|
|
170
|
+
{ name: '二号', value: 26 },
|
|
171
|
+
{ name: '小二', value: 21 },
|
|
172
|
+
{ name: '三号', value: 19 },
|
|
173
|
+
{ name: '小三', value: 18 },
|
|
174
|
+
{ name: '四号', value: 16 },
|
|
175
|
+
{ name: '小四', value: 14 },
|
|
176
|
+
{ name: '五号', value: 12 },
|
|
177
|
+
{ name: '小五', value: 11 },
|
|
178
|
+
{ name: '六号', value: 9 },
|
|
179
|
+
{ name: '小六', value: 8 },
|
|
180
|
+
{ name: '七号', value: 6 },
|
|
181
|
+
{ name: '八号', value: 5 },
|
|
182
|
+
],
|
|
169
183
|
},
|
|
170
184
|
onChange: (editor: AiEditor) => {
|
|
171
185
|
setFooter()
|
|
@@ -174,7 +188,7 @@ const defaultConfig = {
|
|
|
174
188
|
setTimeout(() => {
|
|
175
189
|
setContent()
|
|
176
190
|
}, 200)
|
|
177
|
-
}
|
|
191
|
+
},
|
|
178
192
|
}
|
|
179
193
|
|
|
180
194
|
/**
|
|
@@ -191,72 +205,82 @@ function setContent() {
|
|
|
191
205
|
* @param html
|
|
192
206
|
*/
|
|
193
207
|
function removeAllFontFamilyStyles(html: string): string {
|
|
194
|
-
const tempDiv = document.createElement('div')
|
|
195
|
-
tempDiv.innerHTML = html
|
|
208
|
+
const tempDiv = document.createElement('div')
|
|
209
|
+
tempDiv.innerHTML = html
|
|
196
210
|
|
|
197
211
|
function processElement(element: Element) {
|
|
198
212
|
if (element.hasAttribute('style')) {
|
|
199
|
-
let style = element.getAttribute('style') || ''
|
|
213
|
+
let style = element.getAttribute('style') || ''
|
|
200
214
|
// 规范化样式字符串:确保每个属性以分号结尾
|
|
201
|
-
style = normalizeStyleString(style)
|
|
215
|
+
style = normalizeStyleString(style)
|
|
202
216
|
|
|
203
217
|
// 使用简化的正则表达式移除字体相关属性(现在可以安全地假设每个属性后都有分号)
|
|
204
|
-
style = style.replace(
|
|
218
|
+
style = style.replace(
|
|
219
|
+
/(?:font-family|mso-(?:ascii|hansi|bidi|fareast|east-asian|font)-font-family)\s*:\s*[^;]+;/gi,
|
|
220
|
+
'',
|
|
221
|
+
)
|
|
205
222
|
// 清理空样式
|
|
206
|
-
style = style.trim()
|
|
223
|
+
style = style.trim()
|
|
207
224
|
if (style) {
|
|
208
|
-
element.setAttribute('style', style)
|
|
225
|
+
element.setAttribute('style', style)
|
|
209
226
|
} else {
|
|
210
|
-
element.removeAttribute('style')
|
|
227
|
+
element.removeAttribute('style')
|
|
211
228
|
}
|
|
212
229
|
}
|
|
213
230
|
|
|
214
231
|
// 移除标签上的字体家族相关属性
|
|
215
232
|
const fontFamilyAttrs = [
|
|
216
|
-
'font-family',
|
|
217
|
-
'
|
|
218
|
-
'mso-
|
|
219
|
-
'mso-
|
|
220
|
-
|
|
221
|
-
|
|
233
|
+
'font-family',
|
|
234
|
+
'face',
|
|
235
|
+
'mso-hansi-font-family',
|
|
236
|
+
'mso-bidi-font-family',
|
|
237
|
+
'mso-ascii-font-family',
|
|
238
|
+
'mso-fareast-font-family',
|
|
239
|
+
'mso-east-asian-font-family',
|
|
240
|
+
'mso-font-font-family',
|
|
241
|
+
]
|
|
242
|
+
fontFamilyAttrs.forEach((attr) => element.removeAttribute(attr))
|
|
222
243
|
|
|
223
244
|
// 递归处理子元素
|
|
224
|
-
Array.from(element.children).forEach(child => processElement(child))
|
|
245
|
+
Array.from(element.children).forEach((child) => processElement(child))
|
|
225
246
|
}
|
|
226
247
|
|
|
227
248
|
// 规范化样式字符串:确保每个属性以分号结尾
|
|
228
249
|
function normalizeStyleString(style: string): string {
|
|
229
250
|
// 移除首尾空格
|
|
230
|
-
style = style.trim()
|
|
251
|
+
style = style.trim()
|
|
231
252
|
|
|
232
253
|
// 如果样式为空,直接返回
|
|
233
|
-
if (!style) return ''
|
|
254
|
+
if (!style) return ''
|
|
234
255
|
|
|
235
256
|
// 如果最后一个字符不是分号,添加分号
|
|
236
257
|
if (style.charAt(style.length - 1) !== ';') {
|
|
237
|
-
style += ';'
|
|
258
|
+
style += ';'
|
|
238
259
|
}
|
|
239
260
|
|
|
240
|
-
return style
|
|
261
|
+
return style
|
|
241
262
|
}
|
|
242
263
|
|
|
243
|
-
Array.from(tempDiv.children).forEach(child => processElement(child))
|
|
244
|
-
return tempDiv.innerHTML
|
|
264
|
+
Array.from(tempDiv.children).forEach((child) => processElement(child))
|
|
265
|
+
return tempDiv.innerHTML
|
|
245
266
|
}
|
|
246
267
|
/**
|
|
247
268
|
* 计算富文本框中图片的高度并赋值
|
|
248
269
|
*/
|
|
249
270
|
function calcImagesHeight(html: string) {
|
|
250
271
|
const map = new Map()
|
|
251
|
-
const imageElements = divRef.value.querySelectorAll('img.resize-obj')
|
|
272
|
+
const imageElements = divRef.value.querySelectorAll('img.resize-obj')
|
|
252
273
|
if (imageElements.length > 0) {
|
|
253
274
|
imageElements.forEach((imageElement: any) => {
|
|
254
|
-
const width = imageElement.offsetWidth
|
|
255
|
-
const height = imageElement.offsetHeight
|
|
275
|
+
const width = imageElement.offsetWidth
|
|
276
|
+
const height = imageElement.offsetHeight
|
|
256
277
|
if (width > 1 && height > 1) {
|
|
257
|
-
map.set(
|
|
278
|
+
map.set(
|
|
279
|
+
imageElement.src.length > 100 ? imageElement.src.substring(0, 100) : imageElement.src,
|
|
280
|
+
height,
|
|
281
|
+
)
|
|
258
282
|
}
|
|
259
|
-
})
|
|
283
|
+
})
|
|
260
284
|
for (const [key, value] of map) {
|
|
261
285
|
html = customStringReplacement(html, `${key}`, '>', `height="auto"`, `height="${value}"`)
|
|
262
286
|
}
|
|
@@ -264,33 +288,38 @@ function calcImagesHeight(html: string) {
|
|
|
264
288
|
return html
|
|
265
289
|
}
|
|
266
290
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
291
|
+
function customStringReplacement(
|
|
292
|
+
str: string,
|
|
293
|
+
startMarker: string,
|
|
294
|
+
endMarker: string,
|
|
295
|
+
target: string,
|
|
296
|
+
replacement: string,
|
|
297
|
+
): string {
|
|
298
|
+
let result = ''
|
|
299
|
+
let currentIndex = 0
|
|
271
300
|
|
|
272
301
|
while (true) {
|
|
273
|
-
const startIndex = str.indexOf(startMarker, currentIndex)
|
|
302
|
+
const startIndex = str.indexOf(startMarker, currentIndex)
|
|
274
303
|
if (startIndex === -1) {
|
|
275
|
-
result += str.slice(currentIndex)
|
|
276
|
-
break
|
|
304
|
+
result += str.slice(currentIndex)
|
|
305
|
+
break
|
|
277
306
|
}
|
|
278
307
|
|
|
279
|
-
const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
|
|
308
|
+
const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
|
|
280
309
|
if (endIndex === -1) {
|
|
281
|
-
result += str.slice(currentIndex)
|
|
282
|
-
break
|
|
310
|
+
result += str.slice(currentIndex)
|
|
311
|
+
break
|
|
283
312
|
}
|
|
284
313
|
|
|
285
|
-
result += str.slice(currentIndex, startIndex + startMarker.length)
|
|
286
|
-
const middle = str.slice(startIndex + startMarker.length, endIndex)
|
|
287
|
-
const newMiddle = middle.replace(new RegExp(target, 'g'), replacement)
|
|
288
|
-
result += newMiddle
|
|
289
|
-
result += endMarker
|
|
290
|
-
currentIndex = endIndex + 1
|
|
314
|
+
result += str.slice(currentIndex, startIndex + startMarker.length)
|
|
315
|
+
const middle = str.slice(startIndex + startMarker.length, endIndex)
|
|
316
|
+
const newMiddle = middle.replace(new RegExp(target, 'g'), replacement)
|
|
317
|
+
result += newMiddle
|
|
318
|
+
result += endMarker
|
|
319
|
+
currentIndex = endIndex + 1
|
|
291
320
|
}
|
|
292
321
|
|
|
293
|
-
return result
|
|
322
|
+
return result
|
|
294
323
|
}
|
|
295
324
|
|
|
296
325
|
watch(
|
|
@@ -309,7 +338,7 @@ watch(
|
|
|
309
338
|
}
|
|
310
339
|
}
|
|
311
340
|
},
|
|
312
|
-
{ immediate: true }
|
|
341
|
+
{ immediate: true },
|
|
313
342
|
)
|
|
314
343
|
function initHtml(html: string) {
|
|
315
344
|
html = customStringReplacement(html, '<img', '>', 'height="[0-9]+"', 'height="auto"')
|
|
@@ -319,23 +348,22 @@ function initHtml(html: string) {
|
|
|
319
348
|
onMounted(() => {
|
|
320
349
|
const config = {
|
|
321
350
|
element: divRef.value as Element,
|
|
322
|
-
content: initHtml(model.value),
|
|
351
|
+
content: initHtml(model.value ?? ''),
|
|
323
352
|
...defaultConfig,
|
|
324
353
|
...props.editorConfig,
|
|
325
|
-
fontFamily:{
|
|
326
|
-
values:[
|
|
327
|
-
{name:
|
|
328
|
-
{name:
|
|
329
|
-
{name:
|
|
330
|
-
{name:
|
|
331
|
-
{name:
|
|
332
|
-
{name:
|
|
333
|
-
{name:
|
|
334
|
-
{name:
|
|
335
|
-
]
|
|
354
|
+
fontFamily: {
|
|
355
|
+
values: [
|
|
356
|
+
{ name: '宋体', value: 'SimSun' },
|
|
357
|
+
{ name: '仿宋', value: 'FangSong' },
|
|
358
|
+
{ name: '黑体', value: 'SimHei' },
|
|
359
|
+
{ name: '楷体', value: 'KaiTi' },
|
|
360
|
+
{ name: '微软雅黑', value: 'Microsoft YaHei' },
|
|
361
|
+
{ name: '方正仿宋简体_GBK', value: 'FangSong_GB2312' },
|
|
362
|
+
{ name: 'Arial', value: 'Arial' },
|
|
363
|
+
{ name: 'Times New Roman', value: 'Times New Roman' },
|
|
364
|
+
],
|
|
336
365
|
},
|
|
337
|
-
onCreated: (editor: AiEditor) => {
|
|
338
|
-
}
|
|
366
|
+
onCreated: (editor: AiEditor) => {},
|
|
339
367
|
}
|
|
340
368
|
// 隐藏工具栏
|
|
341
369
|
if (!props.showToolbar) {
|