vue-editify 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
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
+ }