vue-editify 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,1278 @@
1
+ import { AlexElement } from 'alex-editor'
2
+ import { getHljsHtml, languages } from '../hljs'
3
+ import Dap from 'dap-util'
4
+
5
+ //粘贴html时保留的数据
6
+ export const pasteKeepData = {
7
+ //粘贴html时元素保留的样式(全部元素)
8
+ marks: {
9
+ 'data-editify-list': ['div'],
10
+ 'data-editify-value': ['div'],
11
+ 'data-editify-code': ['span'],
12
+ 'data-editify-task': ['div'],
13
+ contenteditable: '*',
14
+ src: ['img', 'video'],
15
+ autoplay: ['video'],
16
+ loop: ['video'],
17
+ muted: ['video'],
18
+ href: ['a'],
19
+ target: ['a'],
20
+ alt: ['img'],
21
+ controls: ['video'],
22
+ name: '*',
23
+ disabled: '*',
24
+ colspan: ['td']
25
+ },
26
+ //粘贴html时非文本元素保留的样式
27
+ styles: {
28
+ 'text-indent': '*',
29
+ 'text-align': '*'
30
+ }
31
+ }
32
+
33
+ //编辑器props属性
34
+ export const editorProps = {
35
+ //编辑器内容
36
+ modelValue: {
37
+ type: String,
38
+ default: '<p><br></p>'
39
+ },
40
+ //占位符
41
+ placeholder: {
42
+ type: String,
43
+ default: ''
44
+ },
45
+ //是否自动获取焦点
46
+ autofocus: {
47
+ type: Boolean,
48
+ default: false
49
+ },
50
+ //是否禁用编辑器
51
+ disabled: {
52
+ type: Boolean,
53
+ default: false
54
+ },
55
+ //是否允许复制
56
+ allowCopy: {
57
+ type: Boolean,
58
+ default: true
59
+ },
60
+ //是否允许粘贴
61
+ allowPaste: {
62
+ type: Boolean,
63
+ default: true
64
+ },
65
+ //是否允许剪切
66
+ allowCut: {
67
+ type: Boolean,
68
+ default: true
69
+ },
70
+ //是否允许粘贴html
71
+ allowPasteHtml: {
72
+ type: Boolean,
73
+ default: false
74
+ },
75
+ //编辑内容高度
76
+ height: {
77
+ type: String,
78
+ default: '600px'
79
+ },
80
+ //是否自适应高度
81
+ autoheight: {
82
+ type: Boolean,
83
+ default: false
84
+ },
85
+ //是否显示边框
86
+ border: {
87
+ type: Boolean,
88
+ default: false
89
+ },
90
+ //主题色
91
+ color: {
92
+ type: String,
93
+ default: '#03a8f3',
94
+ validator(value) {
95
+ return Dap.common.matchingText(value, 'hex')
96
+ }
97
+ },
98
+ //视频宽高比
99
+ videoRatio: {
100
+ type: Number,
101
+ default: 16 / 9
102
+ },
103
+ //工具条按钮设置
104
+ toolbar: {
105
+ type: Object,
106
+ default: null
107
+ },
108
+ //是否显示字数统计
109
+ showWordLength: {
110
+ type: Boolean,
111
+ default: false
112
+ },
113
+ //自定义粘贴图片
114
+ customImagePaste: {
115
+ type: Function,
116
+ default: null
117
+ },
118
+ //自定义粘贴视频
119
+ customVideoPaste: {
120
+ type: Function,
121
+ default: null
122
+ },
123
+ //菜单栏配置
124
+ menu: {
125
+ type: Object,
126
+ default: null
127
+ }
128
+ }
129
+
130
+ //获取colgroup的col数量
131
+ export const getColNumbers = row => {
132
+ const children = row?.children || []
133
+ let num = 0
134
+ children.forEach(td => {
135
+ if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
136
+ const span = Number(td.marks.colspan)
137
+ if (!isNaN(span)) {
138
+ num += span
139
+ }
140
+ } else {
141
+ num += 1
142
+ }
143
+ })
144
+ return num
145
+ }
146
+
147
+ //对象平替值方法
148
+ export const mergeObject = (o1, o2) => {
149
+ if (!Dap.common.isObject(o1) && Dap.common.isObject(o2)) {
150
+ return null
151
+ }
152
+ for (let key in o2) {
153
+ //如果o1和o2的相同属性都是对象并且不是数组,则继续merge
154
+ if (Dap.common.isObject(o2[key]) && !Array.isArray(o2[key]) && Dap.common.isObject(o1[key]) && !Array.isArray(o1[key])) {
155
+ o1[key] = mergeObject(o1[key], o2[key])
156
+ }
157
+ //否则直接将o2的值给o1
158
+ else {
159
+ o1[key] = o2[key]
160
+ }
161
+ }
162
+ return o1
163
+ }
164
+
165
+ //判断是否列表
166
+ export const blockIsList = (element, ordered = false) => {
167
+ return element.type == 'block' && element.parsedom == 'div' && element.hasMarks() && element.marks['data-editify-list'] == (ordered ? 'ol' : 'ul')
168
+ }
169
+
170
+ //判断是否任务列表
171
+ export const blockIsTask = element => {
172
+ return element.type == 'block' && element.parsedom == 'div' && element.hasMarks() && element.marks.hasOwnProperty('data-editify-task')
173
+ }
174
+
175
+ //将某个块元素转为段落
176
+ export const blockToParagraph = element => {
177
+ //如果是有序列表或者无序列表
178
+ if (blockIsList(element, true) || blockIsList(element, false)) {
179
+ let marks = {}
180
+ for (let key in element.marks) {
181
+ if (key != 'data-editify-list' && key != 'data-editify-value') {
182
+ marks[key] = element.marks[key]
183
+ }
184
+ }
185
+ element.marks = marks
186
+ }
187
+ //如果是任务列表
188
+ if (blockIsTask(element)) {
189
+ let marks = {}
190
+ for (let key in element.marks) {
191
+ if (key != 'data-editify-task') {
192
+ marks[key] = element.marks[key]
193
+ }
194
+ }
195
+ element.marks = marks
196
+ }
197
+ element.parsedom = AlexElement.BLOCK_NODE
198
+ }
199
+
200
+ //其他元素转为列表
201
+ export const blockToList = (element, ordered = false) => {
202
+ //如果是列表则返回
203
+ if (blockIsList(element, ordered)) {
204
+ return
205
+ }
206
+ //先转为段落
207
+ blockToParagraph(element)
208
+ //然后转为列表
209
+ element.parsedom = 'div'
210
+ if (!element.hasMarks()) {
211
+ element.marks = {}
212
+ }
213
+ element.marks['data-editify-list'] = ordered ? 'ol' : 'ul'
214
+ }
215
+
216
+ //其他元素转为任务列表
217
+ export const blockToTask = element => {
218
+ //如果是任务列表则返回
219
+ if (blockIsTask(element)) {
220
+ return
221
+ }
222
+ //先转为段落
223
+ blockToParagraph(element)
224
+ //然后转为任务列表
225
+ element.parsedom = 'div'
226
+ if (!element.hasMarks()) {
227
+ element.marks = {}
228
+ }
229
+ element.marks['data-editify-task'] = 'uncheck'
230
+ }
231
+
232
+ //元素格式化时转换ol和li标签
233
+ export const parseList = function (element) {
234
+ //ol标签和ul标签转为div
235
+ if (element.parsedom == 'ol' || element.parsedom == 'ul') {
236
+ if (element.hasChildren()) {
237
+ element.children.forEach((el, index) => {
238
+ const newEl = el.clone()
239
+ newEl.parsedom = 'div'
240
+ newEl.type = 'block'
241
+ if (!newEl.hasMarks()) {
242
+ newEl.marks = {}
243
+ }
244
+ newEl.marks['data-editify-list'] = element.parsedom
245
+ if (element.parsedom == 'ol') {
246
+ newEl.marks['data-editify-value'] = index + 1
247
+ }
248
+ //插入到该元素之后
249
+ this.addElementAfter(newEl, element)
250
+ })
251
+ }
252
+ element.toEmpty()
253
+ }
254
+ //有序列表的序号处理
255
+ if (element.type == 'block' && element.hasMarks() && element.marks['data-editify-list'] == 'ol') {
256
+ //获取前一个元素
257
+ const previousElement = this.getPreviousElement(element)
258
+ //如果前一个元素存在并且也是有序列表
259
+ if (previousElement && previousElement.hasMarks() && previousElement.marks['data-editify-list'] == 'ol') {
260
+ const previousValue = Number(previousElement.marks['data-editify-value'])
261
+ element.marks['data-editify-value'] = previousValue + 1
262
+ }
263
+ //前一个元素不是有序列表,则从0开始
264
+ else {
265
+ element.marks['data-editify-value'] = 1
266
+ }
267
+ }
268
+ }
269
+
270
+ //元素格式化时转换code标签
271
+ export const parseCode = function (element) {
272
+ if (element.parsedom == 'code') {
273
+ element.parsedom = 'span'
274
+ const marks = {
275
+ 'data-editify-code': true
276
+ }
277
+ if (element.hasMarks()) {
278
+ Object.assign(element.marks, marks)
279
+ } else {
280
+ element.marks = marks
281
+ }
282
+ }
283
+ }
284
+
285
+ //元素格式化时处理媒体元素和链接
286
+ export const mediaHandle = function (element) {
287
+ //图片、视频和链接设置marks
288
+ if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
289
+ const marks = {
290
+ 'data-editify-element': element.key
291
+ }
292
+ if (element.hasMarks()) {
293
+ Object.assign(element.marks, marks)
294
+ } else {
295
+ element.marks = marks
296
+ }
297
+ }
298
+
299
+ //视频的特殊处理,两侧无元素时在两侧加上空白文本
300
+ if (element.parsedom == 'video') {
301
+ const previousElement = this.getPreviousElement(element)
302
+ const newTextElement = this.getNextElement(element)
303
+ //如果不存在前一个元素
304
+ if (!previousElement || previousElement.isEmpty()) {
305
+ const spaceText = AlexElement.getSpaceElement()
306
+ this.addElementBefore(spaceText, element)
307
+ }
308
+ //如果不存在后一个元素
309
+ if (!newTextElement || newTextElement.isEmpty()) {
310
+ const spaceText = AlexElement.getSpaceElement()
311
+ this.addElementAfter(spaceText, element)
312
+ }
313
+ }
314
+ }
315
+
316
+ //元素格式化时处理表格
317
+ export const tableHandle = function (element) {
318
+ if (element.parsedom == 'table') {
319
+ const marks = {
320
+ 'data-editify-element': element.key
321
+ }
322
+ if (element.hasMarks()) {
323
+ Object.assign(element.marks, marks)
324
+ } else {
325
+ element.marks = marks
326
+ }
327
+ const elements = AlexElement.flatElements(element.children)
328
+ const rows = elements.filter(el => {
329
+ return el.parsedom == 'tr'
330
+ })
331
+ let colgroup = elements.find(el => {
332
+ return el.parsedom == 'colgroup'
333
+ })
334
+ if (colgroup) {
335
+ colgroup.children.forEach(col => {
336
+ if (!col.hasMarks()) {
337
+ col.marks = {
338
+ width: 'auto'
339
+ }
340
+ } else if (!col.marks['width']) {
341
+ col.marks['width'] = 'auto'
342
+ }
343
+ })
344
+ } else {
345
+ colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
346
+ const colNumber = getColNumbers(rows[0])
347
+ for (let i = colNumber - 1; i >= 0; i--) {
348
+ const col = new AlexElement(
349
+ 'closed',
350
+ 'col',
351
+ {
352
+ width: 'auto'
353
+ },
354
+ null,
355
+ null
356
+ )
357
+ this.addElementTo(col, colgroup)
358
+ }
359
+ }
360
+ element.children = []
361
+ const tbody = new AlexElement('inblock', 'tbody', null, null, null)
362
+ rows.reverse().forEach(row => {
363
+ this.addElementTo(row, tbody)
364
+ })
365
+ this.addElementTo(tbody, element)
366
+ this.addElementTo(colgroup, element)
367
+ } else if (element.parsedom == 'th') {
368
+ element.parsedom = 'td'
369
+ }
370
+ }
371
+
372
+ //更新代码块内的光标位置
373
+ const updateRangeInPre = function (element, originalTextElements, newElements) {
374
+ //如果虚拟光标的起点在代码块内对虚拟光标的起点进行重新定位
375
+ if (this.range.anchor.element.getBlock().isEqual(element)) {
376
+ //获取起点所在文本元素的在所有文本元素中的序列
377
+ const elIndex = originalTextElements.findIndex(el => this.range.anchor.element.isEqual(el))
378
+ //起点在整个代码内容中的位置
379
+ const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item, i) => total + item.textContent.length, 0) + this.range.anchor.offset
380
+ //获取pre下新的子孙元素中全部的文本元素
381
+ const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
382
+ let i = 0
383
+ let index = 0
384
+ //遍历
385
+ while (i < newTextElements.length) {
386
+ let newIndex = index + newTextElements[i].textContent.length
387
+ if (offset >= index && offset <= newIndex) {
388
+ this.range.anchor.element = newTextElements[i]
389
+ this.range.anchor.offset = offset - index
390
+ break
391
+ }
392
+ i++
393
+ index = newIndex
394
+ }
395
+ }
396
+ //如果虚拟光标的终点在代码块内需要对虚拟光标的终点进行重新定位
397
+ if (this.range.focus.element.getBlock().isEqual(element)) {
398
+ //获取终点所在文本元素的在所有文本元素中的序列
399
+ const elIndex = originalTextElements.findIndex(el => this.range.focus.element.isEqual(el))
400
+ //终点在整个代码内容中的位置
401
+ const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item, i) => total + item.textContent.length, 0) + this.range.focus.offset
402
+ //获取全部的新文本元素
403
+ const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
404
+ let i = 0
405
+ let index = 0
406
+ //遍历
407
+ while (i < newTextElements.length) {
408
+ let newIndex = index + newTextElements[i].textContent.length
409
+ if (offset >= index && offset <= newIndex) {
410
+ this.range.focus.element = newTextElements[i]
411
+ this.range.focus.offset = offset - index
412
+ break
413
+ }
414
+ i++
415
+ index = newIndex
416
+ }
417
+ }
418
+ }
419
+
420
+ //元素格式化时处理pre,将pre的内容根据语言进行样式处理
421
+ export const preHandle = function (element, highlight, languages) {
422
+ //如果是代码块进行处理
423
+ if ((element.isBlock() || element.isInblock()) && element.isPreStyle()) {
424
+ const marks = {
425
+ 'data-editify-element': element.key
426
+ }
427
+ if (element.hasMarks()) {
428
+ Object.assign(element.marks, marks)
429
+ } else {
430
+ element.marks = marks
431
+ }
432
+ //高亮处理
433
+ if (highlight && element.hasChildren()) {
434
+ //获取语言类型
435
+ let language = element.marks['data-editify-hljs'] || ''
436
+ if (language && languages && !languages.includes(language)) {
437
+ language = ''
438
+ }
439
+ //获取pre标签下所有的文本元素
440
+ const originalTextElements = AlexElement.flatElements(element.children).filter(el => el.isText() && !el.isEmpty())
441
+ //获取pre下的代码文本值
442
+ const textContent = originalTextElements.reduce((val, item) => {
443
+ return val + item.textContent
444
+ }, '')
445
+ //将文本元素的内容转为经过hljs处理的内容
446
+ const html = getHljsHtml(textContent, language)
447
+ if (html) {
448
+ //将经过hljs处理的内容转为元素数组
449
+ const newElements = this.parseHtml(html)
450
+ //处理光标位置
451
+ updateRangeInPre.apply(this, [element, originalTextElements, newElements])
452
+ //将新文本元素全部加入到pre子元素数组中
453
+ element.children = newElements
454
+ newElements.forEach(newEl => {
455
+ newEl.parent = element
456
+ })
457
+ }
458
+ }
459
+ }
460
+ }
461
+
462
+ //获取菜单按钮列表数据配置
463
+ export const getButtonOptionsConfig = function (editTrans, editLocale) {
464
+ return {
465
+ //标题配置
466
+ heading: [
467
+ {
468
+ label: editTrans('text'),
469
+ value: 'p'
470
+ },
471
+ {
472
+ label: editTrans('h1'),
473
+ value: 'h1',
474
+ style: {
475
+ fontSize: '22px',
476
+ fontWeight: 'bold'
477
+ }
478
+ },
479
+ {
480
+ label: editTrans('h2'),
481
+ value: 'h2',
482
+ style: {
483
+ fontSize: '20px',
484
+ fontWeight: 'bold'
485
+ }
486
+ },
487
+ {
488
+ label: editTrans('h3'),
489
+ value: 'h3',
490
+ style: {
491
+ fontSize: '18px',
492
+ fontWeight: 'bold'
493
+ }
494
+ },
495
+ {
496
+ label: editTrans('h4'),
497
+ value: 'h4',
498
+ style: {
499
+ fontSize: '16px',
500
+ fontWeight: 'bold'
501
+ }
502
+ },
503
+ {
504
+ label: editTrans('h5'),
505
+ value: 'h5',
506
+ style: {
507
+ fontSize: '15px',
508
+ fontWeight: 'bold'
509
+ }
510
+ },
511
+ {
512
+ label: editTrans('h6'),
513
+ value: 'h6',
514
+ style: {
515
+ fontSize: '14px',
516
+ fontWeight: 'bold'
517
+ }
518
+ }
519
+ ],
520
+ //缩进配置
521
+ indent: [
522
+ {
523
+ label: editTrans('indentIncrease'),
524
+ value: 'indent-increase',
525
+ icon: 'indent-increase'
526
+ },
527
+ {
528
+ label: editTrans('indentDecrease'),
529
+ value: 'indent-decrease',
530
+ icon: 'indent-decrease'
531
+ }
532
+ ],
533
+ //对齐方式
534
+ align: [
535
+ {
536
+ label: editTrans('alignLeft'),
537
+ value: 'left',
538
+ icon: 'align-left'
539
+ },
540
+ {
541
+ label: editTrans('alignRight'),
542
+ value: 'right',
543
+ icon: 'align-right'
544
+ },
545
+ {
546
+ label: editTrans('alignCenter'),
547
+ value: 'center',
548
+ icon: 'align-center'
549
+ },
550
+ {
551
+ label: editTrans('alignJustify'),
552
+ value: 'justify',
553
+ icon: 'align-justify'
554
+ }
555
+ ],
556
+ //字号配置
557
+ fontSize: [
558
+ {
559
+ label: editTrans('defaultSize'),
560
+ value: ''
561
+ },
562
+ {
563
+ label: '12px',
564
+ value: '12px'
565
+ },
566
+ {
567
+ label: '14px',
568
+ value: '14px'
569
+ },
570
+ {
571
+ label: '16px',
572
+ value: '16px'
573
+ },
574
+ {
575
+ label: '18px',
576
+ value: '18px'
577
+ },
578
+ {
579
+ label: '20px',
580
+ value: '20px'
581
+ },
582
+ {
583
+ label: '24px',
584
+ value: '24px'
585
+ },
586
+ {
587
+ label: '28px',
588
+ value: '28px'
589
+ },
590
+ {
591
+ label: '32px',
592
+ value: '32px'
593
+ },
594
+ {
595
+ label: '36px',
596
+ value: '36px'
597
+ },
598
+ {
599
+ label: '40px',
600
+ value: '40px'
601
+ }
602
+ ],
603
+ //字体配置
604
+ fontFamily: [
605
+ {
606
+ label: editTrans('defaultFontFamily'),
607
+ value: ''
608
+ },
609
+ {
610
+ label: '黑体',
611
+ value: '黑体,黑体-简'
612
+ },
613
+ {
614
+ label: '华文仿宋',
615
+ value: '华文仿宋'
616
+ },
617
+ {
618
+ label: '楷体',
619
+ value: '楷体,楷体-简'
620
+ },
621
+ {
622
+ label: '华文楷体',
623
+ value: '华文楷体'
624
+ },
625
+ {
626
+ label: '宋体',
627
+ value: '宋体,宋体-简'
628
+ },
629
+ {
630
+ label: 'Arial',
631
+ value: 'Arial'
632
+ },
633
+ {
634
+ label: 'Consolas',
635
+ value: 'Consolas,monospace'
636
+ }
637
+ ],
638
+ //行高配置
639
+ lineHeight: [
640
+ {
641
+ label: editTrans('defaultLineHeight'),
642
+ value: ''
643
+ },
644
+ 1,
645
+ 1.15,
646
+ 1.5,
647
+ 2,
648
+ 2.5,
649
+ 3
650
+ ],
651
+ //前景色配置
652
+ 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'],
653
+ //背景色配置
654
+ 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']
655
+ }
656
+ }
657
+
658
+ //工具条全量配置
659
+ export const getToolbarConfig = function (editTrans, editLocale) {
660
+ return {
661
+ //是否使用工具条
662
+ use: true,
663
+ // 工具条的样式设置
664
+ style: null,
665
+ // 是否使用工具提示
666
+ tooltip: true,
667
+ // 代码块工具条配置
668
+ codeBlock: {
669
+ //语言列表
670
+ languages: {
671
+ //是否显示此工具
672
+ show: true,
673
+ //列表配置
674
+ options: [
675
+ {
676
+ label: editTrans('autoRecognize'),
677
+ value: ''
678
+ },
679
+ ...languages
680
+ ],
681
+ //浮层宽度
682
+ width: 100,
683
+ //浮层最大高度
684
+ maxHeight: 180,
685
+ //左侧边框是否显示
686
+ leftBorder: true,
687
+ //右侧边框是否显示
688
+ rightBorder: false
689
+ }
690
+ },
691
+ //文本工具条配置
692
+ text: {
693
+ //标题
694
+ heading: {
695
+ //是否显示此工具
696
+ show: true,
697
+ //列表配置
698
+ options: getButtonOptionsConfig(editTrans, editLocale).heading,
699
+ //按钮默认显示的值
700
+ defaultValue: 'p',
701
+ //浮层宽度
702
+ width: editLocale == 'en_US' ? 140 : 120,
703
+ //浮层最大高度
704
+ maxHeight: '',
705
+ //左侧边框是否显示
706
+ leftBorder: false,
707
+ //右侧边框是否显示
708
+ rightBorder: true
709
+ },
710
+ //对齐方式
711
+ align: {
712
+ //是否显示此工具
713
+ show: false,
714
+ //列表配置
715
+ options: getButtonOptionsConfig(editTrans, editLocale).align,
716
+ //浮层宽度
717
+ width: editLocale == 'zh_CN' ? 100 : 130,
718
+ //浮层最大高度
719
+ maxHeight: '',
720
+ //左侧边框是否显示
721
+ leftBorder: false,
722
+ //右侧边框是否显示
723
+ rightBorder: false
724
+ },
725
+ //有序列表
726
+ orderList: {
727
+ //是否显示此工具
728
+ show: false,
729
+ //左侧边框是否显示
730
+ leftBorder: false,
731
+ //右侧边框是否显示
732
+ rightBorder: false
733
+ },
734
+ //无序列表
735
+ unorderList: {
736
+ //是否显示此工具
737
+ show: false,
738
+ //左侧边框是否显示
739
+ leftBorder: false,
740
+ //右侧边框是否显示
741
+ rightBorder: false
742
+ },
743
+ //任务列表
744
+ task: {
745
+ //是否显示此工具
746
+ show: false,
747
+ //左侧边框是否显示
748
+ leftBorder: false,
749
+ //右侧边框是否显示
750
+ rightBorder: false
751
+ },
752
+ //粗体
753
+ bold: {
754
+ //是否显示此工具
755
+ show: true,
756
+ //左侧边框是否显示
757
+ leftBorder: false,
758
+ //右侧边框是否显示
759
+ rightBorder: false
760
+ },
761
+ //斜体
762
+ italic: {
763
+ //是否显示此工具
764
+ show: true,
765
+ //左侧边框是否显示
766
+ leftBorder: false,
767
+ //右侧边框是否显示
768
+ rightBorder: false
769
+ },
770
+ //删除线
771
+ strikethrough: {
772
+ //是否显示此工具
773
+ show: true,
774
+ //左侧边框是否显示
775
+ leftBorder: false,
776
+ //右侧边框是否显示
777
+ rightBorder: false
778
+ },
779
+ //下划线
780
+ underline: {
781
+ //是否显示此工具
782
+ show: false,
783
+ //左侧边框是否显示
784
+ leftBorder: false,
785
+ //右侧边框是否显示
786
+ rightBorder: false
787
+ },
788
+ //行内代码
789
+ code: {
790
+ //是否显示此工具
791
+ show: true,
792
+ //左侧边框是否显示
793
+ leftBorder: false,
794
+ //右侧边框是否显示
795
+ rightBorder: false
796
+ },
797
+ //上标
798
+ super: {
799
+ //是否显示此工具
800
+ show: false,
801
+ //左侧边框是否显示
802
+ leftBorder: false,
803
+ //右侧边框是否显示
804
+ rightBorder: false
805
+ },
806
+ //下标
807
+ sub: {
808
+ //是否显示此工具
809
+ show: false,
810
+ //左侧边框是否显示
811
+ leftBorder: false,
812
+ //右侧边框是否显示
813
+ rightBorder: false
814
+ },
815
+ //字号
816
+ fontSize: {
817
+ //是否显示此工具
818
+ show: true,
819
+ //列表配置
820
+ options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
821
+ //按钮默认显示的值
822
+ defaultValue: '',
823
+ //浮层宽度
824
+ width: 90,
825
+ //浮层最大高度
826
+ maxHeight: 200,
827
+ //左侧边框是否显示
828
+ leftBorder: true,
829
+ //右侧边框是否显示
830
+ rightBorder: false
831
+ },
832
+ //字体
833
+ fontFamily: {
834
+ //是否显示此工具
835
+ show: false,
836
+ //列表配置
837
+ options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
838
+ //按钮默认显示的值
839
+ defaultValue: '',
840
+ //浮层宽度
841
+ width: 100,
842
+ //浮层最大高度
843
+ maxHeight: 200,
844
+ //左侧边框是否显示
845
+ leftBorder: false,
846
+ //右侧边框是否显示
847
+ rightBorder: false
848
+ },
849
+ //行高
850
+ lineHeight: {
851
+ //是否显示此工具
852
+ show: false,
853
+ //列表配置
854
+ options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
855
+ //按钮默认显示的值
856
+ defaultValue: '',
857
+ //浮层宽度
858
+ width: 90,
859
+ //浮层最大高度
860
+ maxHeight: '',
861
+ //左侧边框是否显示
862
+ leftBorder: false,
863
+ //右侧边框是否显示
864
+ rightBorder: false
865
+ },
866
+ //前景色
867
+ foreColor: {
868
+ //是否显示此工具
869
+ show: true,
870
+ //列表配置
871
+ options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
872
+ //左侧边框是否显示
873
+ leftBorder: false,
874
+ //右侧边框是否显示
875
+ rightBorder: false
876
+ },
877
+ //背景色
878
+ backColor: {
879
+ //是否显示此工具
880
+ show: true,
881
+ //列表配置
882
+ options: getButtonOptionsConfig(editTrans, editLocale).backColor,
883
+ //左侧边框是否显示
884
+ leftBorder: false,
885
+ //右侧边框是否显示
886
+ rightBorder: false
887
+ },
888
+ //清除格式
889
+ formatClear: {
890
+ //是否显示此工具
891
+ show: true,
892
+ //左侧边框是否显示
893
+ leftBorder: true,
894
+ //右侧边框是否显示
895
+ rightBorder: false
896
+ }
897
+ },
898
+ //(只对文本工具条中的按钮生效)添加额外的按钮禁用判定,回调参数为name,this指向组件实例
899
+ extraDisabled: null
900
+ }
901
+ }
902
+
903
+ //菜单栏全量配置
904
+ export const getMenuConfig = function (editTrans, editLocale) {
905
+ return {
906
+ //是否使用菜单栏
907
+ use: true,
908
+ //是否使用工具提示
909
+ tooltip: true,
910
+ //菜单栏显示模式,支持default/inner/fixed/custom
911
+ mode: 'default',
912
+ //添加额外的按钮禁用判定,回调参数为name,this指向组件实例
913
+ extraDisabled: null,
914
+ //菜单栏的样式自定义
915
+ style: null,
916
+ //菜单排序
917
+ sequence: {
918
+ undo: 0,
919
+ redo: 1,
920
+ heading: 2,
921
+ indent: 3,
922
+ quote: 4,
923
+ align: 5,
924
+ orderList: 6,
925
+ unorderList: 7,
926
+ task: 8,
927
+ bold: 9,
928
+ underline: 10,
929
+ italic: 11,
930
+ strikethrough: 12,
931
+ code: 13,
932
+ super: 14,
933
+ sub: 15,
934
+ formatClear: 16,
935
+ fontSize: 17,
936
+ fontFamily: 18,
937
+ lineHeight: 19,
938
+ foreColor: 20,
939
+ backColor: 21,
940
+ link: 22,
941
+ image: 23,
942
+ video: 24,
943
+ table: 25,
944
+ codeBlock: 26,
945
+ sourceView: 27
946
+ },
947
+ //撤销按钮配置
948
+ undo: {
949
+ //是否显示此按钮
950
+ show: true,
951
+ //左侧边框是否显示
952
+ leftBorder: false,
953
+ //右侧边框是否显示
954
+ rightBorder: false
955
+ },
956
+ //重做按钮配置
957
+ redo: {
958
+ //是否显示此按钮
959
+ show: true,
960
+ //左侧边框是否显示
961
+ leftBorder: false,
962
+ //右侧边框是否显示
963
+ rightBorder: false
964
+ },
965
+ //标题
966
+ heading: {
967
+ //是否显示此按钮
968
+ show: true,
969
+ //列表配置
970
+ options: getButtonOptionsConfig(editTrans, editLocale).heading,
971
+ //按钮默认显示的值
972
+ defaultValue: 'p',
973
+ //浮层宽度
974
+ width: editLocale == 'en_US' ? 140 : 120,
975
+ //浮层最大高度
976
+ maxHeight: '',
977
+ //左侧边框是否显示
978
+ leftBorder: true,
979
+ //右侧边框是否显示
980
+ rightBorder: false
981
+ },
982
+ //缩进
983
+ indent: {
984
+ //是否显示此工具
985
+ show: true,
986
+ //列表配置
987
+ options: getButtonOptionsConfig(editTrans, editLocale).indent,
988
+ //浮层宽度
989
+ width: editLocale == 'en_US' ? 150 : 110,
990
+ //浮层最大高度
991
+ maxHeight: '',
992
+ //左侧边框是否显示
993
+ leftBorder: false,
994
+ //右侧边框是否显示
995
+ rightBorder: false
996
+ },
997
+ //引用按钮配置
998
+ quote: {
999
+ //是否显示此按钮
1000
+ show: true,
1001
+ //左侧边框是否显示
1002
+ leftBorder: false,
1003
+ //右侧边框是否显示
1004
+ rightBorder: false
1005
+ },
1006
+ //对齐方式
1007
+ align: {
1008
+ //是否显示此工具
1009
+ show: true,
1010
+ //列表配置
1011
+ options: getButtonOptionsConfig(editTrans, editLocale).align,
1012
+ //浮层宽度
1013
+ width: editLocale == 'zh_CN' ? 100 : 130,
1014
+ //浮层最大高度
1015
+ maxHeight: '',
1016
+ //左侧边框是否显示
1017
+ leftBorder: true,
1018
+ //右侧边框是否显示
1019
+ rightBorder: false
1020
+ },
1021
+ //有序列表按钮配置
1022
+ orderList: {
1023
+ //是否显示此按钮
1024
+ show: true,
1025
+ //左侧边框是否显示
1026
+ leftBorder: false,
1027
+ //右侧边框是否显示
1028
+ rightBorder: false
1029
+ },
1030
+ //无序列表按钮配置
1031
+ unorderList: {
1032
+ //是否显示此按钮
1033
+ show: true,
1034
+ //左侧边框是否显示
1035
+ leftBorder: false,
1036
+ //右侧边框是否显示
1037
+ rightBorder: false
1038
+ },
1039
+ //任务列表按钮配置
1040
+ task: {
1041
+ //是否显示此按钮
1042
+ show: true,
1043
+ //左侧边框是否显示
1044
+ leftBorder: false,
1045
+ //右侧边框是否显示
1046
+ rightBorder: false
1047
+ },
1048
+ //粗体按钮配置
1049
+ bold: {
1050
+ //是否显示此按钮
1051
+ show: true,
1052
+ //左侧边框是否显示
1053
+ leftBorder: true,
1054
+ //右侧边框是否显示
1055
+ rightBorder: false
1056
+ },
1057
+ //下划线按钮配置
1058
+ underline: {
1059
+ //是否显示此按钮
1060
+ show: true,
1061
+ //左侧边框是否显示
1062
+ leftBorder: false,
1063
+ //右侧边框是否显示
1064
+ rightBorder: false
1065
+ },
1066
+ //斜体按钮配置
1067
+ italic: {
1068
+ //是否显示此按钮
1069
+ show: true,
1070
+ //左侧边框是否显示
1071
+ leftBorder: false,
1072
+ //右侧边框是否显示
1073
+ rightBorder: false
1074
+ },
1075
+ //删除线按钮配置
1076
+ strikethrough: {
1077
+ //是否显示此按钮
1078
+ show: true,
1079
+ //左侧边框是否显示
1080
+ leftBorder: false,
1081
+ //右侧边框是否显示
1082
+ rightBorder: false
1083
+ },
1084
+ //行内代码按钮配置
1085
+ code: {
1086
+ //是否显示此按钮
1087
+ show: true,
1088
+ //左侧边框是否显示
1089
+ leftBorder: false,
1090
+ //右侧边框是否显示
1091
+ rightBorder: false
1092
+ },
1093
+ //上标
1094
+ super: {
1095
+ //是否显示此工具
1096
+ show: true,
1097
+ //左侧边框是否显示
1098
+ leftBorder: false,
1099
+ //右侧边框是否显示
1100
+ rightBorder: false
1101
+ },
1102
+ //下标
1103
+ sub: {
1104
+ //是否显示此工具
1105
+ show: true,
1106
+ //左侧边框是否显示
1107
+ leftBorder: false,
1108
+ //右侧边框是否显示
1109
+ rightBorder: false
1110
+ },
1111
+ //清除格式
1112
+ formatClear: {
1113
+ //是否显示此工具
1114
+ show: true,
1115
+ //左侧边框是否显示
1116
+ leftBorder: false,
1117
+ //右侧边框是否显示
1118
+ rightBorder: false
1119
+ },
1120
+ //字号
1121
+ fontSize: {
1122
+ //是否显示此工具
1123
+ show: true,
1124
+ //列表配置
1125
+ options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
1126
+ //按钮默认显示的值
1127
+ defaultValue: '',
1128
+ //浮层宽度
1129
+ width: 90,
1130
+ //浮层最大高度
1131
+ maxHeight: 200,
1132
+ //左侧边框是否显示
1133
+ leftBorder: true,
1134
+ //右侧边框是否显示
1135
+ rightBorder: false
1136
+ },
1137
+ //字体
1138
+ fontFamily: {
1139
+ //是否显示此工具
1140
+ show: true,
1141
+ //列表配置
1142
+ options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
1143
+ //按钮默认显示的值
1144
+ defaultValue: '',
1145
+ //浮层宽度
1146
+ width: 100,
1147
+ //浮层最大高度
1148
+ maxHeight: 200,
1149
+ //左侧边框是否显示
1150
+ leftBorder: false,
1151
+ //右侧边框是否显示
1152
+ rightBorder: false
1153
+ },
1154
+ //行高
1155
+ lineHeight: {
1156
+ //是否显示此工具
1157
+ show: true,
1158
+ //列表配置
1159
+ options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
1160
+ //按钮默认显示的值
1161
+ defaultValue: '',
1162
+ //浮层宽度
1163
+ width: 90,
1164
+ //浮层最大高度
1165
+ maxHeight: '',
1166
+ //左侧边框是否显示
1167
+ leftBorder: false,
1168
+ //右侧边框是否显示
1169
+ rightBorder: false
1170
+ },
1171
+ //前景色
1172
+ foreColor: {
1173
+ //是否显示此工具
1174
+ show: true,
1175
+ //列表配置
1176
+ options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
1177
+ //左侧边框是否显示
1178
+ leftBorder: true,
1179
+ //右侧边框是否显示
1180
+ rightBorder: false
1181
+ },
1182
+ //背景色
1183
+ backColor: {
1184
+ //是否显示此工具
1185
+ show: true,
1186
+ //列表配置
1187
+ options: getButtonOptionsConfig(editTrans, editLocale).backColor,
1188
+ //左侧边框是否显示
1189
+ leftBorder: false,
1190
+ //右侧边框是否显示
1191
+ rightBorder: false
1192
+ },
1193
+ //链接
1194
+ link: {
1195
+ //是否显示此工具
1196
+ show: true,
1197
+ //左侧边框是否显示
1198
+ leftBorder: true,
1199
+ //右侧边框是否显示
1200
+ rightBorder: false
1201
+ },
1202
+ //图片
1203
+ image: {
1204
+ //是否显示此工具
1205
+ show: true,
1206
+ //左侧边框是否显示
1207
+ leftBorder: false,
1208
+ //右侧边框是否显示
1209
+ rightBorder: false,
1210
+ //图片支持上传的类型,不区分大小写
1211
+ accept: ['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd'],
1212
+ //是否多选图片
1213
+ multiple: false,
1214
+ //单张图片的最大值,单位kb
1215
+ maxSize: null,
1216
+ //单张图片的最小值,单位kb
1217
+ minSize: null,
1218
+ //自定义上传图片
1219
+ customUpload: null,
1220
+ //异常处理函数
1221
+ handleError: null
1222
+ },
1223
+ //视频
1224
+ video: {
1225
+ //是否显示此工具
1226
+ show: true,
1227
+ //左侧边框是否显示
1228
+ leftBorder: false,
1229
+ //右侧边框是否显示
1230
+ rightBorder: false,
1231
+ //图片支持上传的类型,不区分大小写
1232
+ accept: ['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv'],
1233
+ //是否多选视频
1234
+ multiple: false,
1235
+ //单个视频的的最大值,单位kb
1236
+ maxSize: null,
1237
+ //单个视频的最小值,单位kb
1238
+ minSize: null,
1239
+ //自定义上传视频
1240
+ customUpload: null,
1241
+ //异常处理函数
1242
+ handleError: null
1243
+ },
1244
+ //表格
1245
+ table: {
1246
+ //是否显示此工具
1247
+ show: true,
1248
+ //左侧边框是否显示
1249
+ leftBorder: false,
1250
+ //右侧边框是否显示
1251
+ rightBorder: false,
1252
+ //创建时表格的最大行数
1253
+ maxRows: 10,
1254
+ //创建时表格的最大列数
1255
+ maxColumns: 10
1256
+ },
1257
+ //代码块
1258
+ codeBlock: {
1259
+ //是否显示此工具
1260
+ show: true,
1261
+ //左侧边框是否显示
1262
+ leftBorder: false,
1263
+ //右侧边框是否显示
1264
+ rightBorder: false
1265
+ },
1266
+ //代码视图
1267
+ sourceView: {
1268
+ //是否显示此工具
1269
+ show: true,
1270
+ //左侧边框是否显示
1271
+ leftBorder: true,
1272
+ //右侧边框是否显示
1273
+ rightBorder: false
1274
+ },
1275
+ //拓展菜单,每个key表示拓展菜单的唯一名称,value是对象,包含type/title/rightBorder/leftBorder/disabled/active/selectConfig/displayConfig/hideScroll属性
1276
+ extends: {}
1277
+ }
1278
+ }