vue-editify 0.1.2 → 0.1.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.
Files changed (32) hide show
  1. package/README.md +3 -3
  2. package/examples/App.vue +5669 -139
  3. package/examples/main.js +4 -4
  4. package/lib/editify.es.js +192 -161
  5. package/lib/editify.umd.js +1 -1
  6. package/lib/style.css +1 -1
  7. package/package.json +37 -37
  8. package/src/Editify.vue +1178 -1178
  9. package/src/components/Menu.vue +1623 -1623
  10. package/src/components/Toolbar.vue +1214 -1214
  11. package/src/components/base/Button.vue +450 -450
  12. package/src/components/base/Checkbox.vue +196 -196
  13. package/src/components/base/Icon.vue +31 -31
  14. package/src/components/base/Layer.vue +712 -712
  15. package/src/components/base/Tooltip.vue +82 -82
  16. package/src/components/base/Triangle.vue +159 -159
  17. package/src/components/common/Colors.vue +138 -138
  18. package/src/components/common/InsertImage.vue +316 -316
  19. package/src/components/common/InsertLink.vue +136 -136
  20. package/src/components/common/InsertTable.vue +157 -157
  21. package/src/components/common/InsertVideo.vue +316 -316
  22. package/src/core/function.js +1044 -1044
  23. package/src/core/rule.js +239 -239
  24. package/src/core/tool.js +1051 -1051
  25. package/src/css/base.less +30 -30
  26. package/src/css/hljs.less +54 -54
  27. package/src/hljs/index.js +62 -62
  28. package/src/icon/iconfont.css +219 -219
  29. package/src/index.js +24 -24
  30. package/src/locale/en_US.js +86 -86
  31. package/src/locale/index.js +14 -14
  32. package/src/locale/zh_CN.js +86 -86
package/src/core/tool.js CHANGED
@@ -1,1051 +1,1051 @@
1
- import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
2
- import { languages } from '../hljs'
3
-
4
- //粘贴html时保留的数据
5
- export const pasteKeepData = {
6
- //粘贴html时元素保留的样式（全部元素）
7
- marks: {
8
- 'data-editify-list': ['div'],
9
- 'data-editify-value': ['div'],
10
- 'data-editify-code': ['span'],
11
- 'data-editify-task': ['div'],
12
- contenteditable: '*',
13
- src: ['img', 'video'],
14
- autoplay: ['video'],
15
- loop: ['video'],
16
- muted: ['video'],
17
- href: ['a'],
18
- target: ['a'],
19
- alt: ['img'],
20
- controls: ['video'],
21
- name: '*',
22
- disabled: '*',
23
- colspan: ['td']
24
- },
25
- //粘贴html时非文本元素保留的样式
26
- styles: {
27
- 'text-indent': '*',
28
- 'text-align': '*'
29
- }
30
- }
31
-
32
- //编辑器props属性
33
- export const editorProps = {
34
- //编辑器内容
35
- modelValue: {
36
- type: String,
37
- default: '<p><br></p>'
38
- },
39
- //占位符
40
- placeholder: {
41
- type: String,
42
- default: ''
43
- },
44
- //是否自动获取焦点
45
- autofocus: {
46
- type: Boolean,
47
- default: false
48
- },
49
- //是否禁用编辑器
50
- disabled: {
51
- type: Boolean,
52
- default: false
53
- },
54
- //是否允许复制
55
- allowCopy: {
56
- type: Boolean,
57
- default: true
58
- },
59
- //是否允许粘贴
60
- allowPaste: {
61
- type: Boolean,
62
- default: true
63
- },
64
- //是否允许剪切
65
- allowCut: {
66
- type: Boolean,
67
- default: true
68
- },
69
- //是否允许粘贴html
70
- allowPasteHtml: {
71
- type: Boolean,
72
- default: false
73
- },
74
- //是否显示边框
75
- border: {
76
- type: Boolean,
77
- default: false
78
- },
79
- //主题色
80
- color: {
81
- type: String,
82
- default: '#03a8f3',
83
- validator(value) {
84
- return DapCommon.matchingText(value, 'hex')
85
- }
86
- },
87
- //视频宽高比
88
- videoRatio: {
89
- type: Number,
90
- default: 16 / 9
91
- },
92
- //工具条按钮设置
93
- toolbar: {
94
- type: Object,
95
- default: null
96
- },
97
- //是否显示字数统计
98
- showWordLength: {
99
- type: Boolean,
100
- default: false
101
- },
102
- //自定义粘贴图片
103
- customImagePaste: {
104
- type: Function,
105
- default: null
106
- },
107
- //自定义粘贴视频
108
- customVideoPaste: {
109
- type: Function,
110
- default: null
111
- },
112
- //菜单栏配置
113
- menu: {
114
- type: Object,
115
- default: null
116
- },
117
- //粘贴html时额外保留的标记（全部元素生效）
118
- pasteKeepMarks: {
119
- type: Object,
120
- default: null
121
- },
122
- //粘贴html时额外保留的样式（仅在非文本元素生效）
123
- pasteKeepStyles: {
124
- type: Object,
125
- default: null
126
- },
127
- //自定义node转元素时的处理
128
- customParseNode: {
129
- type: Function,
130
- default: null
131
- },
132
- //自定义额外的渲染规范
133
- renderRules: {
134
- type: Array,
135
- default: function () {
136
- return []
137
- }
138
- }
139
- }
140
-
141
- //对象平替值方法
142
- export const mergeObject = function (o1, o2) {
143
- if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
144
- return null
145
- }
146
- for (let key in o2) {
147
- //如果o1和o2的相同属性都是对象并且不是数组，则继续merge
148
- if (DapCommon.isObject(o2[key]) && !Array.isArray(o2[key]) && DapCommon.isObject(o1[key]) && !Array.isArray(o1[key])) {
149
- o1[key] = mergeObject(o1[key], o2[key])
150
- }
151
- //否则直接将o2的值给o1
152
- else {
153
- o1[key] = o2[key]
154
- }
155
- }
156
- return o1
157
- }
158
-
159
- //判断对象是否含有某个属性或者属性值是否一致
160
- export const queryHasValue = function (obj, name, value) {
161
- //如果value不存在则判断是否拥有属性name
162
- if (value == null || value == undefined) {
163
- return obj.hasOwnProperty(name)
164
- }
165
- //固有的值
166
- let ownValue = obj[name]
167
- //如果ownValue不存在则直接返回false
168
- if (ownValue == null || ownValue == undefined) {
169
- return false
170
- }
171
- //如果value是字符串，则先将值转为小写
172
- if (typeof value == 'string') {
173
- value = value.toLocaleLowerCase()
174
- }
175
- //如果ownValue是字符串，则先将值转为小写
176
- if (typeof ownValue == 'string') {
177
- ownValue = ownValue.toLocaleLowerCase()
178
- }
179
- //如果value是rgb或者rgba格式，则去除空格
180
- if (typeof value == 'string' && value && (DapCommon.matchingText(value, 'rgb') || DapCommon.matchingText(value, 'rgba'))) {
181
- value = DapString.trim(value, true)
182
- }
183
- //如果ownValue是rgb或者rgba格式，则去除空格
184
- if (typeof ownValue == 'string' && ownValue && (DapCommon.matchingText(ownValue, 'rgb') || DapCommon.matchingText(ownValue, 'rgba'))) {
185
- ownValue = DapString.trim(ownValue, true)
186
- }
187
- //如果是十六进制值，转为rgb值
188
- if (typeof value == 'string' && value && DapCommon.matchingText(value, 'hex')) {
189
- const arr = DapColor.hex2rgb(value)
190
- value = `rgb(${arr[0]},${arr[1]},${arr[2]})`
191
- }
192
- //如果是十六进制值，转为rgb值
193
- if (typeof ownValue == 'string' && ownValue && DapCommon.matchingText(ownValue, 'hex')) {
194
- const arr = DapColor.hex2rgb(ownValue)
195
- ownValue = `rgb(${arr[0]},${arr[1]},${arr[2]})`
196
- }
197
- return ownValue == value
198
- }
199
-
200
- //深拷贝函数
201
- export const cloneData = function (data) {
202
- if (DapCommon.isObject(data) || Array.isArray(data)) {
203
- return JSON.parse(JSON.stringify(data))
204
- }
205
- return data
206
- }
207
-
208
- //根据行元素获取colgroup的col数量
209
- export const getColNumbers = function (row) {
210
- const children = row?.children || []
211
- let num = 0
212
- children.forEach(td => {
213
- if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
214
- const span = Number(td.marks.colspan)
215
- if (!isNaN(span)) {
216
- num += span
217
- }
218
- } else {
219
- num += 1
220
- }
221
- })
222
- return num
223
- }
224
-
225
- //获取菜单按钮列表数据配置
226
- export const getButtonOptionsConfig = function (editTrans) {
227
- return {
228
- //标题配置
229
- heading: [
230
- {
231
- label: editTrans('text'),
232
- value: 'p'
233
- },
234
- {
235
- label: editTrans('h1'),
236
- value: 'h1',
237
- style: {
238
- fontSize: '26px',
239
- fontWeight: 'bold'
240
- }
241
- },
242
- {
243
- label: editTrans('h2'),
244
- value: 'h2',
245
- style: {
246
- fontSize: '24px',
247
- fontWeight: 'bold'
248
- }
249
- },
250
- {
251
- label: editTrans('h3'),
252
- value: 'h3',
253
- style: {
254
- fontSize: '22px',
255
- fontWeight: 'bold'
256
- }
257
- },
258
- {
259
- label: editTrans('h4'),
260
- value: 'h4',
261
- style: {
262
- fontSize: '20px',
263
- fontWeight: 'bold'
264
- }
265
- },
266
- {
267
- label: editTrans('h5'),
268
- value: 'h5',
269
- style: {
270
- fontSize: '18px',
271
- fontWeight: 'bold'
272
- }
273
- },
274
- {
275
- label: editTrans('h6'),
276
- value: 'h6',
277
- style: {
278
- fontSize: '16px',
279
- fontWeight: 'bold'
280
- }
281
- }
282
- ],
283
- //缩进配置
284
- indent: [
285
- {
286
- label: editTrans('indentIncrease'),
287
- value: 'indent-increase',
288
- icon: 'indent-increase'
289
- },
290
- {
291
- label: editTrans('indentDecrease'),
292
- value: 'indent-decrease',
293
- icon: 'indent-decrease'
294
- }
295
- ],
296
- //对齐方式
297
- align: [
298
- {
299
- label: editTrans('alignLeft'),
300
- value: 'left',
301
- icon: 'align-left'
302
- },
303
- {
304
- label: editTrans('alignRight'),
305
- value: 'right',
306
- icon: 'align-right'
307
- },
308
- {
309
- label: editTrans('alignCenter'),
310
- value: 'center',
311
- icon: 'align-center'
312
- },
313
- {
314
- label: editTrans('alignJustify'),
315
- value: 'justify',
316
- icon: 'align-justify'
317
- }
318
- ],
319
- //字号配置
320
- fontSize: [
321
- {
322
- label: editTrans('defaultSize'),
323
- value: ''
324
- },
325
- {
326
- label: '12px',
327
- value: '12px'
328
- },
329
- {
330
- label: '14px',
331
- value: '14px'
332
- },
333
- {
334
- label: '16px',
335
- value: '16px'
336
- },
337
- {
338
- label: '18px',
339
- value: '18px'
340
- },
341
- {
342
- label: '20px',
343
- value: '20px'
344
- },
345
- {
346
- label: '24px',
347
- value: '24px'
348
- },
349
- {
350
- label: '28px',
351
- value: '28px'
352
- },
353
- {
354
- label: '32px',
355
- value: '32px'
356
- },
357
- {
358
- label: '36px',
359
- value: '36px'
360
- },
361
- {
362
- label: '40px',
363
- value: '40px'
364
- }
365
- ],
366
- //字体配置
367
- fontFamily: [
368
- {
369
- label: editTrans('defaultFontFamily'),
370
- value: ''
371
- },
372
- {
373
- label: '黑体',
374
- value: '黑体,黑体-简'
375
- },
376
- {
377
- label: '华文仿宋',
378
- value: '华文仿宋'
379
- },
380
- {
381
- label: '楷体',
382
- value: '楷体,楷体-简'
383
- },
384
- {
385
- label: '华文楷体',
386
- value: '华文楷体'
387
- },
388
- {
389
- label: '宋体',
390
- value: '宋体,宋体-简'
391
- },
392
- {
393
- label: 'Arial',
394
- value: 'Arial'
395
- },
396
- {
397
- label: 'Consolas',
398
- value: 'Consolas,monospace'
399
- }
400
- ],
401
- //行高配置
402
- lineHeight: [
403
- {
404
- label: editTrans('defaultLineHeight'),
405
- value: ''
406
- },
407
- 1,
408
- 1.15,
409
- 1.5,
410
- 2,
411
- 2.5,
412
- 3
413
- ],
414
- //前景色配置
415
- foreColor: ['#000000', '#505050', '#808080', '#BBBBBB', '#CCCCCC', '#EEEEEE', '#F7F7F7', '#FFFFFF', '#EC1A0A', '#FF9900', '#FFFF00', '#07C160', '#00FFFF', '#0B73DE', '#9C00FF', '#FF00FF', '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE', '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD', '#e45649', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5', '#CE0000', '#E79439', '#EFC631', '#50a14f', '#4A7B8C', '#03A8F3', '#634AA5', '#A54A7B', '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842', '#630000', '#7B3900', '#986801', '#295218', '#083139', '#003163', '#21104A', '#4A1031'],
416
- //背景色配置
417
- backColor: ['#000000', '#505050', '#808080', '#BBBBBB', '#CCCCCC', '#EEEEEE', '#F7F7F7', '#FFFFFF', '#EC1A0A', '#FF9900', '#FFFF00', '#07C160', '#00FFFF', '#0B73DE', '#9C00FF', '#FF00FF', '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE', '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD', '#e45649', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5', '#CE0000', '#E79439', '#EFC631', '#50a14f', '#4A7B8C', '#03A8F3', '#634AA5', '#A54A7B', '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842', '#630000', '#7B3900', '#986801', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
418
- }
419
- }
420
-
421
- //工具条全量配置
422
- export const getToolbarConfig = function (editTrans, editLocale) {
423
- return {
424
- //是否使用工具条
425
- use: true,
426
- // 工具条的样式设置
427
- style: null,
428
- // 是否使用工具提示
429
- tooltip: true,
430
- // 代码块工具条配置
431
- codeBlock: {
432
- //语言列表
433
- languages: {
434
- //是否显示此工具
435
- show: true,
436
- //列表配置
437
- options: [
438
- {
439
- label: editTrans('autoRecognize'),
440
- value: ''
441
- },
442
- ...languages
443
- ],
444
- //浮层宽度
445
- width: 120,
446
- //浮层最大高度
447
- maxHeight: 180,
448
- //左侧边框是否显示
449
- leftBorder: true,
450
- //右侧边框是否显示
451
- rightBorder: false
452
- }
453
- },
454
- //文本工具条配置
455
- text: {
456
- //标题
457
- heading: {
458
- //是否显示此工具
459
- show: true,
460
- //列表配置
461
- options: getButtonOptionsConfig(editTrans, editLocale).heading,
462
- //按钮默认显示的值
463
- defaultValue: 'p',
464
- //浮层宽度
465
- width: editLocale == 'en_US' ? 150 : 130,
466
- //浮层最大高度
467
- maxHeight: '',
468
- //左侧边框是否显示
469
- leftBorder: false,
470
- //右侧边框是否显示
471
- rightBorder: true
472
- },
473
- //对齐方式
474
- align: {
475
- //是否显示此工具
476
- show: false,
477
- //列表配置
478
- options: getButtonOptionsConfig(editTrans, editLocale).align,
479
- //浮层宽度
480
- width: editLocale == 'zh_CN' ? 110 : 130,
481
- //浮层最大高度
482
- maxHeight: '',
483
- //左侧边框是否显示
484
- leftBorder: false,
485
- //右侧边框是否显示
486
- rightBorder: false
487
- },
488
- //有序列表
489
- orderList: {
490
- //是否显示此工具
491
- show: false,
492
- //左侧边框是否显示
493
- leftBorder: false,
494
- //右侧边框是否显示
495
- rightBorder: false
496
- },
497
- //无序列表
498
- unorderList: {
499
- //是否显示此工具
500
- show: false,
501
- //左侧边框是否显示
502
- leftBorder: false,
503
- //右侧边框是否显示
504
- rightBorder: false
505
- },
506
- //任务列表
507
- task: {
508
- //是否显示此工具
509
- show: false,
510
- //左侧边框是否显示
511
- leftBorder: false,
512
- //右侧边框是否显示
513
- rightBorder: false
514
- },
515
- //粗体
516
- bold: {
517
- //是否显示此工具
518
- show: true,
519
- //左侧边框是否显示
520
- leftBorder: false,
521
- //右侧边框是否显示
522
- rightBorder: false
523
- },
524
- //斜体
525
- italic: {
526
- //是否显示此工具
527
- show: true,
528
- //左侧边框是否显示
529
- leftBorder: false,
530
- //右侧边框是否显示
531
- rightBorder: false
532
- },
533
- //删除线
534
- strikethrough: {
535
- //是否显示此工具
536
- show: true,
537
- //左侧边框是否显示
538
- leftBorder: false,
539
- //右侧边框是否显示
540
- rightBorder: false
541
- },
542
- //下划线
543
- underline: {
544
- //是否显示此工具
545
- show: true,
546
- //左侧边框是否显示
547
- leftBorder: false,
548
- //右侧边框是否显示
549
- rightBorder: false
550
- },
551
- //行内代码
552
- code: {
553
- //是否显示此工具
554
- show: true,
555
- //左侧边框是否显示
556
- leftBorder: false,
557
- //右侧边框是否显示
558
- rightBorder: false
559
- },
560
- //上标
561
- super: {
562
- //是否显示此工具
563
- show: false,
564
- //左侧边框是否显示
565
- leftBorder: false,
566
- //右侧边框是否显示
567
- rightBorder: false
568
- },
569
- //下标
570
- sub: {
571
- //是否显示此工具
572
- show: false,
573
- //左侧边框是否显示
574
- leftBorder: false,
575
- //右侧边框是否显示
576
- rightBorder: false
577
- },
578
- //字号
579
- fontSize: {
580
- //是否显示此工具
581
- show: true,
582
- //列表配置
583
- options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
584
- //按钮默认显示的值
585
- defaultValue: '',
586
- //浮层宽度
587
- width: 100,
588
- //浮层最大高度
589
- maxHeight: 200,
590
- //左侧边框是否显示
591
- leftBorder: true,
592
- //右侧边框是否显示
593
- rightBorder: false
594
- },
595
- //字体
596
- fontFamily: {
597
- //是否显示此工具
598
- show: false,
599
- //列表配置
600
- options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
601
- //按钮默认显示的值
602
- defaultValue: '',
603
- //浮层宽度
604
- width: 100,
605
- //浮层最大高度
606
- maxHeight: 200,
607
- //左侧边框是否显示
608
- leftBorder: false,
609
- //右侧边框是否显示
610
- rightBorder: false
611
- },
612
- //行高
613
- lineHeight: {
614
- //是否显示此工具
615
- show: false,
616
- //列表配置
617
- options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
618
- //按钮默认显示的值
619
- defaultValue: '',
620
- //浮层宽度
621
- width: 90,
622
- //浮层最大高度
623
- maxHeight: '',
624
- //左侧边框是否显示
625
- leftBorder: false,
626
- //右侧边框是否显示
627
- rightBorder: false
628
- },
629
- //前景色
630
- foreColor: {
631
- //是否显示此工具
632
- show: true,
633
- //列表配置
634
- options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
635
- //左侧边框是否显示
636
- leftBorder: false,
637
- //右侧边框是否显示
638
- rightBorder: false
639
- },
640
- //背景色
641
- backColor: {
642
- //是否显示此工具
643
- show: true,
644
- //列表配置
645
- options: getButtonOptionsConfig(editTrans, editLocale).backColor,
646
- //左侧边框是否显示
647
- leftBorder: false,
648
- //右侧边框是否显示
649
- rightBorder: false
650
- },
651
- //清除格式
652
- formatClear: {
653
- //是否显示此工具
654
- show: true,
655
- //左侧边框是否显示
656
- leftBorder: true,
657
- //右侧边框是否显示
658
- rightBorder: false
659
- }
660
- },
661
- //（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name，this指向组件实例
662
- extraDisabled: null
663
- }
664
- }
665
-
666
- //菜单栏全量配置
667
- export const getMenuConfig = function (editTrans, editLocale) {
668
- return {
669
- //是否使用菜单栏
670
- use: true,
671
- //是否使用工具提示
672
- tooltip: true,
673
- //菜单栏显示模式，支持default/inner/fixed
674
- mode: 'default',
675
- //添加额外的按钮禁用判定，回调参数为name，this指向组件实例
676
- extraDisabled: null,
677
- //菜单栏的样式自定义
678
- style: null,
679
- //菜单排序
680
- sequence: {
681
- undo: 0,
682
- redo: 1,
683
- heading: 2,
684
- indent: 3,
685
- quote: 4,
686
- align: 5,
687
- orderList: 6,
688
- unorderList: 7,
689
- task: 8,
690
- bold: 9,
691
- underline: 10,
692
- italic: 11,
693
- strikethrough: 12,
694
- code: 13,
695
- super: 14,
696
- sub: 15,
697
- formatClear: 16,
698
- fontSize: 17,
699
- fontFamily: 18,
700
- lineHeight: 19,
701
- foreColor: 20,
702
- backColor: 21,
703
- link: 22,
704
- image: 23,
705
- video: 24,
706
- table: 25,
707
- codeBlock: 26,
708
- sourceView: 27,
709
- fullScreen: 28
710
- },
711
- //撤销按钮配置
712
- undo: {
713
- //是否显示此按钮
714
- show: true,
715
- //左侧边框是否显示
716
- leftBorder: false,
717
- //右侧边框是否显示
718
- rightBorder: false
719
- },
720
- //重做按钮配置
721
- redo: {
722
- //是否显示此按钮
723
- show: true,
724
- //左侧边框是否显示
725
- leftBorder: false,
726
- //右侧边框是否显示
727
- rightBorder: false
728
- },
729
- //标题
730
- heading: {
731
- //是否显示此按钮
732
- show: true,
733
- //列表配置
734
- options: getButtonOptionsConfig(editTrans, editLocale).heading,
735
- //按钮默认显示的值
736
- defaultValue: 'p',
737
- //浮层宽度
738
- width: editLocale == 'en_US' ? 150 : 130,
739
- //浮层最大高度
740
- maxHeight: '',
741
- //左侧边框是否显示
742
- leftBorder: true,
743
- //右侧边框是否显示
744
- rightBorder: false
745
- },
746
- //缩进
747
- indent: {
748
- //是否显示此工具
749
- show: true,
750
- //列表配置
751
- options: getButtonOptionsConfig(editTrans, editLocale).indent,
752
- //浮层宽度
753
- width: editLocale == 'en_US' ? 150 : 110,
754
- //浮层最大高度
755
- maxHeight: '',
756
- //左侧边框是否显示
757
- leftBorder: false,
758
- //右侧边框是否显示
759
- rightBorder: false
760
- },
761
- //引用按钮配置
762
- quote: {
763
- //是否显示此按钮
764
- show: true,
765
- //左侧边框是否显示
766
- leftBorder: false,
767
- //右侧边框是否显示
768
- rightBorder: false
769
- },
770
- //对齐方式
771
- align: {
772
- //是否显示此工具
773
- show: true,
774
- //列表配置
775
- options: getButtonOptionsConfig(editTrans, editLocale).align,
776
- //浮层宽度
777
- width: editLocale == 'zh_CN' ? 110 : 130,
778
- //浮层最大高度
779
- maxHeight: '',
780
- //左侧边框是否显示
781
- leftBorder: true,
782
- //右侧边框是否显示
783
- rightBorder: false
784
- },
785
- //有序列表按钮配置
786
- orderList: {
787
- //是否显示此按钮
788
- show: true,
789
- //左侧边框是否显示
790
- leftBorder: false,
791
- //右侧边框是否显示
792
- rightBorder: false
793
- },
794
- //无序列表按钮配置
795
- unorderList: {
796
- //是否显示此按钮
797
- show: true,
798
- //左侧边框是否显示
799
- leftBorder: false,
800
- //右侧边框是否显示
801
- rightBorder: false
802
- },
803
- //任务列表按钮配置
804
- task: {
805
- //是否显示此按钮
806
- show: true,
807
- //左侧边框是否显示
808
- leftBorder: false,
809
- //右侧边框是否显示
810
- rightBorder: false
811
- },
812
- //粗体按钮配置
813
- bold: {
814
- //是否显示此按钮
815
- show: true,
816
- //左侧边框是否显示
817
- leftBorder: true,
818
- //右侧边框是否显示
819
- rightBorder: false
820
- },
821
- //下划线按钮配置
822
- underline: {
823
- //是否显示此按钮
824
- show: true,
825
- //左侧边框是否显示
826
- leftBorder: false,
827
- //右侧边框是否显示
828
- rightBorder: false
829
- },
830
- //斜体按钮配置
831
- italic: {
832
- //是否显示此按钮
833
- show: true,
834
- //左侧边框是否显示
835
- leftBorder: false,
836
- //右侧边框是否显示
837
- rightBorder: false
838
- },
839
- //删除线按钮配置
840
- strikethrough: {
841
- //是否显示此按钮
842
- show: true,
843
- //左侧边框是否显示
844
- leftBorder: false,
845
- //右侧边框是否显示
846
- rightBorder: false
847
- },
848
- //行内代码按钮配置
849
- code: {
850
- //是否显示此按钮
851
- show: true,
852
- //左侧边框是否显示
853
- leftBorder: false,
854
- //右侧边框是否显示
855
- rightBorder: false
856
- },
857
- //上标
858
- super: {
859
- //是否显示此工具
860
- show: true,
861
- //左侧边框是否显示
862
- leftBorder: false,
863
- //右侧边框是否显示
864
- rightBorder: false
865
- },
866
- //下标
867
- sub: {
868
- //是否显示此工具
869
- show: true,
870
- //左侧边框是否显示
871
- leftBorder: false,
872
- //右侧边框是否显示
873
- rightBorder: false
874
- },
875
- //清除格式
876
- formatClear: {
877
- //是否显示此工具
878
- show: true,
879
- //左侧边框是否显示
880
- leftBorder: false,
881
- //右侧边框是否显示
882
- rightBorder: false
883
- },
884
- //字号
885
- fontSize: {
886
- //是否显示此工具
887
- show: true,
888
- //列表配置
889
- options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
890
- //按钮默认显示的值
891
- defaultValue: '',
892
- //浮层宽度
893
- width: 100,
894
- //浮层最大高度
895
- maxHeight: 200,
896
- //左侧边框是否显示
897
- leftBorder: true,
898
- //右侧边框是否显示
899
- rightBorder: false
900
- },
901
- //字体
902
- fontFamily: {
903
- //是否显示此工具
904
- show: true,
905
- //列表配置
906
- options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
907
- //按钮默认显示的值
908
- defaultValue: '',
909
- //浮层宽度
910
- width: 100,
911
- //浮层最大高度
912
- maxHeight: 200,
913
- //左侧边框是否显示
914
- leftBorder: false,
915
- //右侧边框是否显示
916
- rightBorder: false
917
- },
918
- //行高
919
- lineHeight: {
920
- //是否显示此工具
921
- show: true,
922
- //列表配置
923
- options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
924
- //按钮默认显示的值
925
- defaultValue: '',
926
- //浮层宽度
927
- width: 90,
928
- //浮层最大高度
929
- maxHeight: '',
930
- //左侧边框是否显示
931
- leftBorder: false,
932
- //右侧边框是否显示
933
- rightBorder: false
934
- },
935
- //前景色
936
- foreColor: {
937
- //是否显示此工具
938
- show: true,
939
- //列表配置
940
- options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
941
- //左侧边框是否显示
942
- leftBorder: true,
943
- //右侧边框是否显示
944
- rightBorder: false
945
- },
946
- //背景色
947
- backColor: {
948
- //是否显示此工具
949
- show: true,
950
- //列表配置
951
- options: getButtonOptionsConfig(editTrans, editLocale).backColor,
952
- //左侧边框是否显示
953
- leftBorder: false,
954
- //右侧边框是否显示
955
- rightBorder: false
956
- },
957
- //链接
958
- link: {
959
- //是否显示此工具
960
- show: true,
961
- //左侧边框是否显示
962
- leftBorder: true,
963
- //右侧边框是否显示
964
- rightBorder: false
965
- },
966
- //图片
967
- image: {
968
- //是否显示此工具
969
- show: true,
970
- //左侧边框是否显示
971
- leftBorder: false,
972
- //右侧边框是否显示
973
- rightBorder: false,
974
- //图片支持上传的类型，不区分大小写
975
- accept: ['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd'],
976
- //是否多选图片
977
- multiple: false,
978
- //单张图片的最大值，单位kb
979
- maxSize: null,
980
- //单张图片的最小值，单位kb
981
- minSize: null,
982
- //自定义上传图片
983
- customUpload: null,
984
- //异常处理函数
985
- handleError: null
986
- },
987
- //视频
988
- video: {
989
- //是否显示此工具
990
- show: true,
991
- //左侧边框是否显示
992
- leftBorder: false,
993
- //右侧边框是否显示
994
- rightBorder: false,
995
- //视频支持上传的类型，不区分大小写
996
- accept: ['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv'],
997
- //是否多选视频
998
- multiple: false,
999
- //单个视频的的最大值，单位kb
1000
- maxSize: null,
1001
- //单个视频的最小值，单位kb
1002
- minSize: null,
1003
- //自定义上传视频
1004
- customUpload: null,
1005
- //异常处理函数
1006
- handleError: null
1007
- },
1008
- //表格
1009
- table: {
1010
- //是否显示此工具
1011
- show: true,
1012
- //左侧边框是否显示
1013
- leftBorder: false,
1014
- //右侧边框是否显示
1015
- rightBorder: false,
1016
- //创建时表格的最大行数
1017
- maxRows: 10,
1018
- //创建时表格的最大列数
1019
- maxColumns: 10
1020
- },
1021
- //代码块
1022
- codeBlock: {
1023
- //是否显示此工具
1024
- show: true,
1025
- //左侧边框是否显示
1026
- leftBorder: false,
1027
- //右侧边框是否显示
1028
- rightBorder: false
1029
- },
1030
- //代码视图
1031
- sourceView: {
1032
- //是否显示此工具
1033
- show: false,
1034
- //左侧边框是否显示
1035
- leftBorder: false,
1036
- //右侧边框是否显示
1037
- rightBorder: false
1038
- },
1039
- //全屏
1040
- fullScreen: {
1041
- //是否显示此工具
1042
- show: false,
1043
- //左侧边框是否显示
1044
- leftBorder: false,
1045
- //右侧边框是否显示
1046
- rightBorder: false
1047
- },
1048
- //拓展菜单，每个key表示拓展菜单的唯一名称，value是对象，包含type/title/rightBorder/leftBorder/disabled/active/width/maxHeight/options/value/hideScroll/onLayerShow/onLayerShown/onLayerHidden/onOperate/default/layer/option属性
1049
- extends: {}
1050
- }
1051
- }
1
+ import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
2
+ import { languages } from '../hljs'
3
+
4
+ //粘贴html时保留的数据
5
+ export const pasteKeepData = {
6
+ //粘贴html时元素保留的样式（全部元素）
7
+ marks: {
8
+ 'data-editify-list': ['div'],
9
+ 'data-editify-value': ['div'],
10
+ 'data-editify-code': ['span'],
11
+ 'data-editify-task': ['div'],
12
+ contenteditable: '*',
13
+ src: ['img', 'video'],
14
+ autoplay: ['video'],
15
+ loop: ['video'],
16
+ muted: ['video'],
17
+ href: ['a'],
18
+ target: ['a'],
19
+ alt: ['img'],
20
+ controls: ['video'],
21
+ name: '*',
22
+ disabled: '*',
23
+ colspan: ['td']
24
+ },
25
+ //粘贴html时非文本元素保留的样式
26
+ styles: {
27
+ 'text-indent': '*',
28
+ 'text-align': '*'
29
+ }
30
+ }
31
+
32
+ //编辑器props属性
33
+ export const editorProps = {
34
+ //编辑器内容
35
+ modelValue: {
36
+ type: String,
37
+ default: '<p><br></p>'
38
+ },
39
+ //占位符
40
+ placeholder: {
41
+ type: String,
42
+ default: ''
43
+ },
44
+ //是否自动获取焦点
45
+ autofocus: {
46
+ type: Boolean,
47
+ default: false
48
+ },
49
+ //是否禁用编辑器
50
+ disabled: {
51
+ type: Boolean,
52
+ default: false
53
+ },
54
+ //是否允许复制
55
+ allowCopy: {
56
+ type: Boolean,
57
+ default: true
58
+ },
59
+ //是否允许粘贴
60
+ allowPaste: {
61
+ type: Boolean,
62
+ default: true
63
+ },
64
+ //是否允许剪切
65
+ allowCut: {
66
+ type: Boolean,
67
+ default: true
68
+ },
69
+ //是否允许粘贴html
70
+ allowPasteHtml: {
71
+ type: Boolean,
72
+ default: false
73
+ },
74
+ //是否显示边框
75
+ border: {
76
+ type: Boolean,
77
+ default: false
78
+ },
79
+ //主题色
80
+ color: {
81
+ type: String,
82
+ default: '#03a8f3',
83
+ validator(value) {
84
+ return DapCommon.matchingText(value, 'hex')
85
+ }
86
+ },
87
+ //视频宽高比
88
+ videoRatio: {
89
+ type: Number,
90
+ default: 16 / 9
91
+ },
92
+ //工具条按钮设置
93
+ toolbar: {
94
+ type: Object,
95
+ default: null
96
+ },
97
+ //是否显示字数统计
98
+ showWordLength: {
99
+ type: Boolean,
100
+ default: false
101
+ },
102
+ //自定义粘贴图片
103
+ customImagePaste: {
104
+ type: Function,
105
+ default: null
106
+ },
107
+ //自定义粘贴视频
108
+ customVideoPaste: {
109
+ type: Function,
110
+ default: null
111
+ },
112
+ //菜单栏配置
113
+ menu: {
114
+ type: Object,
115
+ default: null
116
+ },
117
+ //粘贴html时额外保留的标记（全部元素生效）
118
+ pasteKeepMarks: {
119
+ type: Object,
120
+ default: null
121
+ },
122
+ //粘贴html时额外保留的样式（仅在非文本元素生效）
123
+ pasteKeepStyles: {
124
+ type: Object,
125
+ default: null
126
+ },
127
+ //自定义node转元素时的处理
128
+ customParseNode: {
129
+ type: Function,
130
+ default: null
131
+ },
132
+ //自定义额外的渲染规范
133
+ renderRules: {
134
+ type: Array,
135
+ default: function () {
136
+ return []
137
+ }
138
+ }
139
+ }
140
+
141
+ //对象平替值方法
142
+ export const mergeObject = function (o1, o2) {
143
+ if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
144
+ return null
145
+ }
146
+ for (let key in o2) {
147
+ //如果o1和o2的相同属性都是对象并且不是数组，则继续merge
148
+ if (DapCommon.isObject(o2[key]) && !Array.isArray(o2[key]) && DapCommon.isObject(o1[key]) && !Array.isArray(o1[key])) {
149
+ o1[key] = mergeObject(o1[key], o2[key])
150
+ }
151
+ //否则直接将o2的值给o1
152
+ else {
153
+ o1[key] = o2[key]
154
+ }
155
+ }
156
+ return o1
157
+ }
158
+
159
+ //判断对象是否含有某个属性或者属性值是否一致
160
+ export const queryHasValue = function (obj, name, value) {
161
+ //如果value不存在则判断是否拥有属性name
162
+ if (value == null || value == undefined) {
163
+ return obj.hasOwnProperty(name)
164
+ }
165
+ //固有的值
166
+ let ownValue = obj[name]
167
+ //如果ownValue不存在则直接返回false
168
+ if (ownValue == null || ownValue == undefined) {
169
+ return false
170
+ }
171
+ //如果value是字符串，则先将值转为小写
172
+ if (typeof value == 'string') {
173
+ value = value.toLocaleLowerCase()
174
+ }
175
+ //如果ownValue是字符串，则先将值转为小写
176
+ if (typeof ownValue == 'string') {
177
+ ownValue = ownValue.toLocaleLowerCase()
178
+ }
179
+ //如果value是rgb或者rgba格式，则去除空格
180
+ if (typeof value == 'string' && value && (DapCommon.matchingText(value, 'rgb') || DapCommon.matchingText(value, 'rgba'))) {
181
+ value = DapString.trim(value, true)
182
+ }
183
+ //如果ownValue是rgb或者rgba格式，则去除空格
184
+ if (typeof ownValue == 'string' && ownValue && (DapCommon.matchingText(ownValue, 'rgb') || DapCommon.matchingText(ownValue, 'rgba'))) {
185
+ ownValue = DapString.trim(ownValue, true)
186
+ }
187
+ //如果是十六进制值，转为rgb值
188
+ if (typeof value == 'string' && value && DapCommon.matchingText(value, 'hex')) {
189
+ const arr = DapColor.hex2rgb(value)
190
+ value = `rgb(${arr[0]},${arr[1]},${arr[2]})`
191
+ }
192
+ //如果是十六进制值，转为rgb值
193
+ if (typeof ownValue == 'string' && ownValue && DapCommon.matchingText(ownValue, 'hex')) {
194
+ const arr = DapColor.hex2rgb(ownValue)
195
+ ownValue = `rgb(${arr[0]},${arr[1]},${arr[2]})`
196
+ }
197
+ return ownValue == value
198
+ }
199
+
200
+ //深拷贝函数
201
+ export const cloneData = function (data) {
202
+ if (DapCommon.isObject(data) || Array.isArray(data)) {
203
+ return JSON.parse(JSON.stringify(data))
204
+ }
205
+ return data
206
+ }
207
+
208
+ //根据行元素获取colgroup的col数量
209
+ export const getColNumbers = function (row) {
210
+ const children = row?.children || []
211
+ let num = 0
212
+ children.forEach(td => {
213
+ if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
214
+ const span = Number(td.marks.colspan)
215
+ if (!isNaN(span)) {
216
+ num += span
217
+ }
218
+ } else {
219
+ num += 1
220
+ }
221
+ })
222
+ return num
223
+ }
224
+
225
+ //获取菜单按钮列表数据配置
226
+ export const getButtonOptionsConfig = function (editTrans) {
227
+ return {
228
+ //标题配置
229
+ heading: [
230
+ {
231
+ label: editTrans('text'),
232
+ value: 'p'
233
+ },
234
+ {
235
+ label: editTrans('h1'),
236
+ value: 'h1',
237
+ style: {
238
+ fontSize: '26px',
239
+ fontWeight: 'bold'
240
+ }
241
+ },
242
+ {
243
+ label: editTrans('h2'),
244
+ value: 'h2',
245
+ style: {
246
+ fontSize: '24px',
247
+ fontWeight: 'bold'
248
+ }
249
+ },
250
+ {
251
+ label: editTrans('h3'),
252
+ value: 'h3',
253
+ style: {
254
+ fontSize: '22px',
255
+ fontWeight: 'bold'
256
+ }
257
+ },
258
+ {
259
+ label: editTrans('h4'),
260
+ value: 'h4',
261
+ style: {
262
+ fontSize: '20px',
263
+ fontWeight: 'bold'
264
+ }
265
+ },
266
+ {
267
+ label: editTrans('h5'),
268
+ value: 'h5',
269
+ style: {
270
+ fontSize: '18px',
271
+ fontWeight: 'bold'
272
+ }
273
+ },
274
+ {
275
+ label: editTrans('h6'),
276
+ value: 'h6',
277
+ style: {
278
+ fontSize: '16px',
279
+ fontWeight: 'bold'
280
+ }
281
+ }
282
+ ],
283
+ //缩进配置
284
+ indent: [
285
+ {
286
+ label: editTrans('indentIncrease'),
287
+ value: 'indent-increase',
288
+ icon: 'indent-increase'
289
+ },
290
+ {
291
+ label: editTrans('indentDecrease'),
292
+ value: 'indent-decrease',
293
+ icon: 'indent-decrease'
294
+ }
295
+ ],
296
+ //对齐方式
297
+ align: [
298
+ {
299
+ label: editTrans('alignLeft'),
300
+ value: 'left',
301
+ icon: 'align-left'
302
+ },
303
+ {
304
+ label: editTrans('alignRight'),
305
+ value: 'right',
306
+ icon: 'align-right'
307
+ },
308
+ {
309
+ label: editTrans('alignCenter'),
310
+ value: 'center',
311
+ icon: 'align-center'
312
+ },
313
+ {
314
+ label: editTrans('alignJustify'),
315
+ value: 'justify',
316
+ icon: 'align-justify'
317
+ }
318
+ ],
319
+ //字号配置
320
+ fontSize: [
321
+ {
322
+ label: editTrans('defaultSize'),
323
+ value: ''
324
+ },
325
+ {
326
+ label: '12px',
327
+ value: '12px'
328
+ },
329
+ {
330
+ label: '14px',
331
+ value: '14px'
332
+ },
333
+ {
334
+ label: '16px',
335
+ value: '16px'
336
+ },
337
+ {
338
+ label: '18px',
339
+ value: '18px'
340
+ },
341
+ {
342
+ label: '20px',
343
+ value: '20px'
344
+ },
345
+ {
346
+ label: '24px',
347
+ value: '24px'
348
+ },
349
+ {
350
+ label: '28px',
351
+ value: '28px'
352
+ },
353
+ {
354
+ label: '32px',
355
+ value: '32px'
356
+ },
357
+ {
358
+ label: '36px',
359
+ value: '36px'
360
+ },
361
+ {
362
+ label: '40px',
363
+ value: '40px'
364
+ }
365
+ ],
366
+ //字体配置
367
+ fontFamily: [
368
+ {
369
+ label: editTrans('defaultFontFamily'),
370
+ value: ''
371
+ },
372
+ {
373
+ label: '黑体',
374
+ value: '黑体,黑体-简'
375
+ },
376
+ {
377
+ label: '华文仿宋',
378
+ value: '华文仿宋'
379
+ },
380
+ {
381
+ label: '楷体',
382
+ value: '楷体,楷体-简'
383
+ },
384
+ {
385
+ label: '华文楷体',
386
+ value: '华文楷体'
387
+ },
388
+ {
389
+ label: '宋体',
390
+ value: '宋体,宋体-简'
391
+ },
392
+ {
393
+ label: 'Arial',
394
+ value: 'Arial'
395
+ },
396
+ {
397
+ label: 'Consolas',
398
+ value: 'Consolas,monospace'
399
+ }
400
+ ],
401
+ //行高配置
402
+ lineHeight: [
403
+ {
404
+ label: editTrans('defaultLineHeight'),
405
+ value: ''
406
+ },
407
+ 1,
408
+ 1.15,
409
+ 1.5,
410
+ 2,
411
+ 2.5,
412
+ 3
413
+ ],
414
+ //前景色配置
415
+ foreColor: ['#000000', '#505050', '#808080', '#BBBBBB', '#CCCCCC', '#EEEEEE', '#F7F7F7', '#FFFFFF', '#EC1A0A', '#FF9900', '#FFFF00', '#07C160', '#00FFFF', '#0B73DE', '#9C00FF', '#FF00FF', '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE', '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD', '#e45649', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5', '#CE0000', '#E79439', '#EFC631', '#50a14f', '#4A7B8C', '#03A8F3', '#634AA5', '#A54A7B', '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842', '#630000', '#7B3900', '#986801', '#295218', '#083139', '#003163', '#21104A', '#4A1031'],
416
+ //背景色配置
417
+ backColor: ['#000000', '#505050', '#808080', '#BBBBBB', '#CCCCCC', '#EEEEEE', '#F7F7F7', '#FFFFFF', '#EC1A0A', '#FF9900', '#FFFF00', '#07C160', '#00FFFF', '#0B73DE', '#9C00FF', '#FF00FF', '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE', '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD', '#e45649', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5', '#CE0000', '#E79439', '#EFC631', '#50a14f', '#4A7B8C', '#03A8F3', '#634AA5', '#A54A7B', '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842', '#630000', '#7B3900', '#986801', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
418
+ }
419
+ }
420
+
421
+ //工具条全量配置
422
+ export const getToolbarConfig = function (editTrans, editLocale) {
423
+ return {
424
+ //是否使用工具条
425
+ use: true,
426
+ // 工具条的样式设置
427
+ style: null,
428
+ // 是否使用工具提示
429
+ tooltip: true,
430
+ // 代码块工具条配置
431
+ codeBlock: {
432
+ //语言列表
433
+ languages: {
434
+ //是否显示此工具
435
+ show: true,
436
+ //列表配置
437
+ options: [
438
+ {
439
+ label: editTrans('autoRecognize'),
440
+ value: ''
441
+ },
442
+ ...languages
443
+ ],
444
+ //浮层宽度
445
+ width: 120,
446
+ //浮层最大高度
447
+ maxHeight: 180,
448
+ //左侧边框是否显示
449
+ leftBorder: true,
450
+ //右侧边框是否显示
451
+ rightBorder: false
452
+ }
453
+ },
454
+ //文本工具条配置
455
+ text: {
456
+ //标题
457
+ heading: {
458
+ //是否显示此工具
459
+ show: true,
460
+ //列表配置
461
+ options: getButtonOptionsConfig(editTrans, editLocale).heading,
462
+ //按钮默认显示的值
463
+ defaultValue: 'p',
464
+ //浮层宽度
465
+ width: editLocale == 'en_US' ? 150 : 130,
466
+ //浮层最大高度
467
+ maxHeight: '',
468
+ //左侧边框是否显示
469
+ leftBorder: false,
470
+ //右侧边框是否显示
471
+ rightBorder: true
472
+ },
473
+ //对齐方式
474
+ align: {
475
+ //是否显示此工具
476
+ show: false,
477
+ //列表配置
478
+ options: getButtonOptionsConfig(editTrans, editLocale).align,
479
+ //浮层宽度
480
+ width: editLocale == 'zh_CN' ? 110 : 130,
481
+ //浮层最大高度
482
+ maxHeight: '',
483
+ //左侧边框是否显示
484
+ leftBorder: false,
485
+ //右侧边框是否显示
486
+ rightBorder: false
487
+ },
488
+ //有序列表
489
+ orderList: {
490
+ //是否显示此工具
491
+ show: false,
492
+ //左侧边框是否显示
493
+ leftBorder: false,
494
+ //右侧边框是否显示
495
+ rightBorder: false
496
+ },
497
+ //无序列表
498
+ unorderList: {
499
+ //是否显示此工具
500
+ show: false,
501
+ //左侧边框是否显示
502
+ leftBorder: false,
503
+ //右侧边框是否显示
504
+ rightBorder: false
505
+ },
506
+ //任务列表
507
+ task: {
508
+ //是否显示此工具
509
+ show: false,
510
+ //左侧边框是否显示
511
+ leftBorder: false,
512
+ //右侧边框是否显示
513
+ rightBorder: false
514
+ },
515
+ //粗体
516
+ bold: {
517
+ //是否显示此工具
518
+ show: true,
519
+ //左侧边框是否显示
520
+ leftBorder: false,
521
+ //右侧边框是否显示
522
+ rightBorder: false
523
+ },
524
+ //斜体
525
+ italic: {
526
+ //是否显示此工具
527
+ show: true,
528
+ //左侧边框是否显示
529
+ leftBorder: false,
530
+ //右侧边框是否显示
531
+ rightBorder: false
532
+ },
533
+ //删除线
534
+ strikethrough: {
535
+ //是否显示此工具
536
+ show: true,
537
+ //左侧边框是否显示
538
+ leftBorder: false,
539
+ //右侧边框是否显示
540
+ rightBorder: false
541
+ },
542
+ //下划线
543
+ underline: {
544
+ //是否显示此工具
545
+ show: true,
546
+ //左侧边框是否显示
547
+ leftBorder: false,
548
+ //右侧边框是否显示
549
+ rightBorder: false
550
+ },
551
+ //行内代码
552
+ code: {
553
+ //是否显示此工具
554
+ show: true,
555
+ //左侧边框是否显示
556
+ leftBorder: false,
557
+ //右侧边框是否显示
558
+ rightBorder: false
559
+ },
560
+ //上标
561
+ super: {
562
+ //是否显示此工具
563
+ show: false,
564
+ //左侧边框是否显示
565
+ leftBorder: false,
566
+ //右侧边框是否显示
567
+ rightBorder: false
568
+ },
569
+ //下标
570
+ sub: {
571
+ //是否显示此工具
572
+ show: false,
573
+ //左侧边框是否显示
574
+ leftBorder: false,
575
+ //右侧边框是否显示
576
+ rightBorder: false
577
+ },
578
+ //字号
579
+ fontSize: {
580
+ //是否显示此工具
581
+ show: true,
582
+ //列表配置
583
+ options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
584
+ //按钮默认显示的值
585
+ defaultValue: '',
586
+ //浮层宽度
587
+ width: 100,
588
+ //浮层最大高度
589
+ maxHeight: 200,
590
+ //左侧边框是否显示
591
+ leftBorder: true,
592
+ //右侧边框是否显示
593
+ rightBorder: false
594
+ },
595
+ //字体
596
+ fontFamily: {
597
+ //是否显示此工具
598
+ show: false,
599
+ //列表配置
600
+ options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
601
+ //按钮默认显示的值
602
+ defaultValue: '',
603
+ //浮层宽度
604
+ width: 100,
605
+ //浮层最大高度
606
+ maxHeight: 200,
607
+ //左侧边框是否显示
608
+ leftBorder: false,
609
+ //右侧边框是否显示
610
+ rightBorder: false
611
+ },
612
+ //行高
613
+ lineHeight: {
614
+ //是否显示此工具
615
+ show: false,
616
+ //列表配置
617
+ options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
618
+ //按钮默认显示的值
619
+ defaultValue: '',
620
+ //浮层宽度
621
+ width: 90,
622
+ //浮层最大高度
623
+ maxHeight: '',
624
+ //左侧边框是否显示
625
+ leftBorder: false,
626
+ //右侧边框是否显示
627
+ rightBorder: false
628
+ },
629
+ //前景色
630
+ foreColor: {
631
+ //是否显示此工具
632
+ show: true,
633
+ //列表配置
634
+ options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
635
+ //左侧边框是否显示
636
+ leftBorder: false,
637
+ //右侧边框是否显示
638
+ rightBorder: false
639
+ },
640
+ //背景色
641
+ backColor: {
642
+ //是否显示此工具
643
+ show: true,
644
+ //列表配置
645
+ options: getButtonOptionsConfig(editTrans, editLocale).backColor,
646
+ //左侧边框是否显示
647
+ leftBorder: false,
648
+ //右侧边框是否显示
649
+ rightBorder: false
650
+ },
651
+ //清除格式
652
+ formatClear: {
653
+ //是否显示此工具
654
+ show: true,
655
+ //左侧边框是否显示
656
+ leftBorder: true,
657
+ //右侧边框是否显示
658
+ rightBorder: false
659
+ }
660
+ },
661
+ //（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name，this指向组件实例
662
+ extraDisabled: null
663
+ }
664
+ }
665
+
666
+ //菜单栏全量配置
667
+ export const getMenuConfig = function (editTrans, editLocale) {
668
+ return {
669
+ //是否使用菜单栏
670
+ use: true,
671
+ //是否使用工具提示
672
+ tooltip: true,
673
+ //菜单栏显示模式，支持default/inner/fixed
674
+ mode: 'default',
675
+ //添加额外的按钮禁用判定，回调参数为name，this指向组件实例
676
+ extraDisabled: null,
677
+ //菜单栏的样式自定义
678
+ style: null,
679
+ //菜单排序
680
+ sequence: {
681
+ undo: 0,
682
+ redo: 1,
683
+ heading: 2,
684
+ indent: 3,
685
+ quote: 4,
686
+ align: 5,
687
+ orderList: 6,
688
+ unorderList: 7,
689
+ task: 8,
690
+ bold: 9,
691
+ underline: 10,
692
+ italic: 11,
693
+ strikethrough: 12,
694
+ code: 13,
695
+ super: 14,
696
+ sub: 15,
697
+ formatClear: 16,
698
+ fontSize: 17,
699
+ fontFamily: 18,
700
+ lineHeight: 19,
701
+ foreColor: 20,
702
+ backColor: 21,
703
+ link: 22,
704
+ image: 23,
705
+ video: 24,
706
+ table: 25,
707
+ codeBlock: 26,
708
+ sourceView: 27,
709
+ fullScreen: 28
710
+ },
711
+ //撤销按钮配置
712
+ undo: {
713
+ //是否显示此按钮
714
+ show: true,
715
+ //左侧边框是否显示
716
+ leftBorder: false,
717
+ //右侧边框是否显示
718
+ rightBorder: false
719
+ },
720
+ //重做按钮配置
721
+ redo: {
722
+ //是否显示此按钮
723
+ show: true,
724
+ //左侧边框是否显示
725
+ leftBorder: false,
726
+ //右侧边框是否显示
727
+ rightBorder: false
728
+ },
729
+ //标题
730
+ heading: {
731
+ //是否显示此按钮
732
+ show: true,
733
+ //列表配置
734
+ options: getButtonOptionsConfig(editTrans, editLocale).heading,
735
+ //按钮默认显示的值
736
+ defaultValue: 'p',
737
+ //浮层宽度
738
+ width: editLocale == 'en_US' ? 150 : 130,
739
+ //浮层最大高度
740
+ maxHeight: '',
741
+ //左侧边框是否显示
742
+ leftBorder: true,
743
+ //右侧边框是否显示
744
+ rightBorder: false
745
+ },
746
+ //缩进
747
+ indent: {
748
+ //是否显示此工具
749
+ show: true,
750
+ //列表配置
751
+ options: getButtonOptionsConfig(editTrans, editLocale).indent,
752
+ //浮层宽度
753
+ width: editLocale == 'en_US' ? 150 : 110,
754
+ //浮层最大高度
755
+ maxHeight: '',
756
+ //左侧边框是否显示
757
+ leftBorder: false,
758
+ //右侧边框是否显示
759
+ rightBorder: false
760
+ },
761
+ //引用按钮配置
762
+ quote: {
763
+ //是否显示此按钮
764
+ show: true,
765
+ //左侧边框是否显示
766
+ leftBorder: false,
767
+ //右侧边框是否显示
768
+ rightBorder: false
769
+ },
770
+ //对齐方式
771
+ align: {
772
+ //是否显示此工具
773
+ show: true,
774
+ //列表配置
775
+ options: getButtonOptionsConfig(editTrans, editLocale).align,
776
+ //浮层宽度
777
+ width: editLocale == 'zh_CN' ? 110 : 130,
778
+ //浮层最大高度
779
+ maxHeight: '',
780
+ //左侧边框是否显示
781
+ leftBorder: true,
782
+ //右侧边框是否显示
783
+ rightBorder: false
784
+ },
785
+ //有序列表按钮配置
786
+ orderList: {
787
+ //是否显示此按钮
788
+ show: true,
789
+ //左侧边框是否显示
790
+ leftBorder: false,
791
+ //右侧边框是否显示
792
+ rightBorder: false
793
+ },
794
+ //无序列表按钮配置
795
+ unorderList: {
796
+ //是否显示此按钮
797
+ show: true,
798
+ //左侧边框是否显示
799
+ leftBorder: false,
800
+ //右侧边框是否显示
801
+ rightBorder: false
802
+ },
803
+ //任务列表按钮配置
804
+ task: {
805
+ //是否显示此按钮
806
+ show: true,
807
+ //左侧边框是否显示
808
+ leftBorder: false,
809
+ //右侧边框是否显示
810
+ rightBorder: false
811
+ },
812
+ //粗体按钮配置
813
+ bold: {
814
+ //是否显示此按钮
815
+ show: true,
816
+ //左侧边框是否显示
817
+ leftBorder: true,
818
+ //右侧边框是否显示
819
+ rightBorder: false
820
+ },
821
+ //下划线按钮配置
822
+ underline: {
823
+ //是否显示此按钮
824
+ show: true,
825
+ //左侧边框是否显示
826
+ leftBorder: false,
827
+ //右侧边框是否显示
828
+ rightBorder: false
829
+ },
830
+ //斜体按钮配置
831
+ italic: {
832
+ //是否显示此按钮
833
+ show: true,
834
+ //左侧边框是否显示
835
+ leftBorder: false,
836
+ //右侧边框是否显示
837
+ rightBorder: false
838
+ },
839
+ //删除线按钮配置
840
+ strikethrough: {
841
+ //是否显示此按钮
842
+ show: true,
843
+ //左侧边框是否显示
844
+ leftBorder: false,
845
+ //右侧边框是否显示
846
+ rightBorder: false
847
+ },
848
+ //行内代码按钮配置
849
+ code: {
850
+ //是否显示此按钮
851
+ show: true,
852
+ //左侧边框是否显示
853
+ leftBorder: false,
854
+ //右侧边框是否显示
855
+ rightBorder: false
856
+ },
857
+ //上标
858
+ super: {
859
+ //是否显示此工具
860
+ show: true,
861
+ //左侧边框是否显示
862
+ leftBorder: false,
863
+ //右侧边框是否显示
864
+ rightBorder: false
865
+ },
866
+ //下标
867
+ sub: {
868
+ //是否显示此工具
869
+ show: true,
870
+ //左侧边框是否显示
871
+ leftBorder: false,
872
+ //右侧边框是否显示
873
+ rightBorder: false
874
+ },
875
+ //清除格式
876
+ formatClear: {
877
+ //是否显示此工具
878
+ show: true,
879
+ //左侧边框是否显示
880
+ leftBorder: false,
881
+ //右侧边框是否显示
882
+ rightBorder: false
883
+ },
884
+ //字号
885
+ fontSize: {
886
+ //是否显示此工具
887
+ show: true,
888
+ //列表配置
889
+ options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
890
+ //按钮默认显示的值
891
+ defaultValue: '',
892
+ //浮层宽度
893
+ width: 100,
894
+ //浮层最大高度
895
+ maxHeight: 200,
896
+ //左侧边框是否显示
897
+ leftBorder: true,
898
+ //右侧边框是否显示
899
+ rightBorder: false
900
+ },
901
+ //字体
902
+ fontFamily: {
903
+ //是否显示此工具
904
+ show: true,
905
+ //列表配置
906
+ options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
907
+ //按钮默认显示的值
908
+ defaultValue: '',
909
+ //浮层宽度
910
+ width: 100,
911
+ //浮层最大高度
912
+ maxHeight: 200,
913
+ //左侧边框是否显示
914
+ leftBorder: false,
915
+ //右侧边框是否显示
916
+ rightBorder: false
917
+ },
918
+ //行高
919
+ lineHeight: {
920
+ //是否显示此工具
921
+ show: true,
922
+ //列表配置
923
+ options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
924
+ //按钮默认显示的值
925
+ defaultValue: '',
926
+ //浮层宽度
927
+ width: 90,
928
+ //浮层最大高度
929
+ maxHeight: '',
930
+ //左侧边框是否显示
931
+ leftBorder: false,
932
+ //右侧边框是否显示
933
+ rightBorder: false
934
+ },
935
+ //前景色
936
+ foreColor: {
937
+ //是否显示此工具
938
+ show: true,
939
+ //列表配置
940
+ options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
941
+ //左侧边框是否显示
942
+ leftBorder: true,
943
+ //右侧边框是否显示
944
+ rightBorder: false
945
+ },
946
+ //背景色
947
+ backColor: {
948
+ //是否显示此工具
949
+ show: true,
950
+ //列表配置
951
+ options: getButtonOptionsConfig(editTrans, editLocale).backColor,
952
+ //左侧边框是否显示
953
+ leftBorder: false,
954
+ //右侧边框是否显示
955
+ rightBorder: false
956
+ },
957
+ //链接
958
+ link: {
959
+ //是否显示此工具
960
+ show: true,
961
+ //左侧边框是否显示
962
+ leftBorder: true,
963
+ //右侧边框是否显示
964
+ rightBorder: false
965
+ },
966
+ //图片
967
+ image: {
968
+ //是否显示此工具
969
+ show: true,
970
+ //左侧边框是否显示
971
+ leftBorder: false,
972
+ //右侧边框是否显示
973
+ rightBorder: false,
974
+ //图片支持上传的类型，不区分大小写
975
+ accept: ['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd'],
976
+ //是否多选图片
977
+ multiple: false,
978
+ //单张图片的最大值，单位kb
979
+ maxSize: null,
980
+ //单张图片的最小值，单位kb
981
+ minSize: null,
982
+ //自定义上传图片
983
+ customUpload: null,
984
+ //异常处理函数
985
+ handleError: null
986
+ },
987
+ //视频
988
+ video: {
989
+ //是否显示此工具
990
+ show: true,
991
+ //左侧边框是否显示
992
+ leftBorder: false,
993
+ //右侧边框是否显示
994
+ rightBorder: false,
995
+ //视频支持上传的类型，不区分大小写
996
+ accept: ['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv'],
997
+ //是否多选视频
998
+ multiple: false,
999
+ //单个视频的的最大值，单位kb
1000
+ maxSize: null,
1001
+ //单个视频的最小值，单位kb
1002
+ minSize: null,
1003
+ //自定义上传视频
1004
+ customUpload: null,
1005
+ //异常处理函数
1006
+ handleError: null
1007
+ },
1008
+ //表格
1009
+ table: {
1010
+ //是否显示此工具
1011
+ show: true,
1012
+ //左侧边框是否显示
1013
+ leftBorder: false,
1014
+ //右侧边框是否显示
1015
+ rightBorder: false,
1016
+ //创建时表格的最大行数
1017
+ maxRows: 10,
1018
+ //创建时表格的最大列数
1019
+ maxColumns: 10
1020
+ },
1021
+ //代码块
1022
+ codeBlock: {
1023
+ //是否显示此工具
1024
+ show: true,
1025
+ //左侧边框是否显示
1026
+ leftBorder: false,
1027
+ //右侧边框是否显示
1028
+ rightBorder: false
1029
+ },
1030
+ //代码视图
1031
+ sourceView: {
1032
+ //是否显示此工具
1033
+ show: false,
1034
+ //左侧边框是否显示
1035
+ leftBorder: false,
1036
+ //右侧边框是否显示
1037
+ rightBorder: false
1038
+ },
1039
+ //全屏
1040
+ fullScreen: {
1041
+ //是否显示此工具
1042
+ show: false,
1043
+ //左侧边框是否显示
1044
+ leftBorder: false,
1045
+ //右侧边框是否显示
1046
+ rightBorder: false
1047
+ },
1048
+ //拓展菜单，每个key表示拓展菜单的唯一名称，value是对象，包含type/title/rightBorder/leftBorder/disabled/active/width/maxHeight/options/value/hideScroll/onLayerShow/onLayerShown/onLayerHidden/onOperate/default/layer/option属性
1049
+ extends: {}
1050
+ }
1051
+ }