vue-editify 0.0.50 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +27 -45
- package/lib/editify.es.js +6877 -7829
- package/lib/editify.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/src/Editify.vue +262 -1240
- package/src/components/{bussiness/Menu.vue → Menu.vue} +238 -139
- package/src/components/{bussiness/Toolbar.vue → Toolbar.vue} +227 -141
- package/src/components/base/Button.vue +6 -6
- package/src/components/base/Checkbox.vue +4 -4
- package/src/components/base/Layer.vue +12 -12
- package/src/components/{bussiness → common}/InsertImage.vue +7 -7
- package/src/components/{bussiness → common}/InsertVideo.vue +7 -7
- package/src/core/function.js +1044 -0
- package/src/core/rule.js +239 -0
- package/src/core/{index.js → tool.js} +60 -296
- package/src/index.js +1 -1
- /package/src/components/{bussiness → common}/Colors.vue +0 -0
- /package/src/components/{bussiness → common}/InsertLink.vue +0 -0
- /package/src/components/{bussiness → common}/InsertTable.vue +0 -0
@@ -5,11 +5,11 @@
|
|
5
5
|
<template v-if="type == 'link'">
|
6
6
|
<div class="editify-toolbar-link">
|
7
7
|
<div class="editify-toolbar-link-label">{{ $editTrans('linkAddress') }}</div>
|
8
|
-
<input @
|
8
|
+
<input @change="modifyLink" @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkUrlEnterPlaceholder')" v-model.trim="linkConfig.url" type="url" />
|
9
9
|
<div class="editify-toolbar-link-footer">
|
10
10
|
<Checkbox @change="modifyLink" v-model="linkConfig.newOpen" :label="$editTrans('newWindowOpen')" :color="$parent.color" :size="10"></Checkbox>
|
11
11
|
<div class="editify-toolbar-link-operations">
|
12
|
-
<span @click="
|
12
|
+
<span @click="removeLink">{{ $editTrans('removeLink') }}</span>
|
13
13
|
<a :href="linkConfig.url" target="_blank" :style="{ color: $parent.color }">{{ $editTrans('viewLink') }}</a>
|
14
14
|
</div>
|
15
15
|
</div>
|
@@ -28,7 +28,7 @@
|
|
28
28
|
<Icon value="auto-width"></Icon>
|
29
29
|
</Button>
|
30
30
|
<!-- 删除图片 -->
|
31
|
-
<Button @operate="
|
31
|
+
<Button @operate="deleteElement('img')" name="deleteImage" :title="$editTrans('deleteImage')" :tooltip="config.tooltip" :color="$parent.color">
|
32
32
|
<Icon value="delete"></Icon>
|
33
33
|
</Button>
|
34
34
|
</template>
|
@@ -61,7 +61,7 @@
|
|
61
61
|
<Icon value="controls"></Icon>
|
62
62
|
</Button>
|
63
63
|
<!-- 删除视频 -->
|
64
|
-
<Button @operate="
|
64
|
+
<Button @operate="deleteElement('video')" name="deleteVideo" :title="$editTrans('deleteVideo')" :tooltip="config.tooltip" :color="$parent.color">
|
65
65
|
<Icon value="delete"></Icon>
|
66
66
|
</Button>
|
67
67
|
</template>
|
@@ -100,7 +100,7 @@
|
|
100
100
|
<Icon value="delete-column"></Icon>
|
101
101
|
</Button>
|
102
102
|
<!-- 删除表格 -->
|
103
|
-
<Button @operate="
|
103
|
+
<Button @operate="deleteElement('table')" name="deleteTable" :title="$editTrans('deleteTable')" :tooltip="config.tooltip" :color="$parent.color">
|
104
104
|
<Icon value="delete-table"></Icon>
|
105
105
|
</Button>
|
106
106
|
</template>
|
@@ -194,14 +194,15 @@
|
|
194
194
|
</Layer>
|
195
195
|
</template>
|
196
196
|
<script>
|
197
|
-
import Layer from '
|
198
|
-
import Tooltip from '
|
199
|
-
import Button from '
|
200
|
-
import Icon from '
|
201
|
-
import Checkbox from '
|
202
|
-
import Colors from './Colors'
|
197
|
+
import Layer from './base/Layer'
|
198
|
+
import Tooltip from './base/Tooltip'
|
199
|
+
import Button from './base/Button'
|
200
|
+
import Icon from './base/Icon'
|
201
|
+
import Checkbox from './base/Checkbox'
|
202
|
+
import Colors from './common/Colors'
|
203
203
|
import { AlexElement } from 'alex-editor'
|
204
|
-
import
|
204
|
+
import { common as DapCommon } from 'dap-util'
|
205
|
+
import { getCurrentParsedomElement, removeTextStyle, removeTextMark, setTextStyle, setLineHeight, setTextMark, setList, setTask, setHeading, setAlign, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark } from '../core/function'
|
205
206
|
export default {
|
206
207
|
name: 'Toolbar',
|
207
208
|
emits: ['update:modelValue'],
|
@@ -472,102 +473,207 @@ export default {
|
|
472
473
|
},
|
473
474
|
inject: ['$editTrans'],
|
474
475
|
methods: {
|
476
|
+
//输入框获取焦点
|
477
|
+
handleInputFocus(e) {
|
478
|
+
if (this.$parent.color) {
|
479
|
+
e.currentTarget.style.borderColor = this.$parent.color
|
480
|
+
}
|
481
|
+
},
|
482
|
+
//输入框失去焦点
|
483
|
+
handleInputBlur(e) {
|
484
|
+
e.currentTarget.style.borderColor = ''
|
485
|
+
},
|
475
486
|
//清除格式
|
476
487
|
clearFormat() {
|
477
|
-
this.$parent
|
488
|
+
removeTextStyle(this.$parent)
|
489
|
+
removeTextMark(this.$parent)
|
490
|
+
this.$parent.editor.formatElementStack()
|
491
|
+
this.$parent.editor.domRender()
|
492
|
+
this.$parent.editor.rangeRender()
|
478
493
|
},
|
479
494
|
//设置背景色
|
480
495
|
setBackColor(value) {
|
481
|
-
this.$parent
|
496
|
+
setTextStyle(this.$parent, {
|
497
|
+
'background-color': value
|
498
|
+
})
|
482
499
|
this.$refs.backColor.hideLayer()
|
500
|
+
this.$parent.editor.formatElementStack()
|
501
|
+
this.$parent.editor.domRender()
|
502
|
+
this.$parent.editor.rangeRender()
|
483
503
|
},
|
484
504
|
//设置前景色
|
485
505
|
setForeColor(value) {
|
486
|
-
this.$parent
|
506
|
+
setTextStyle(this.$parent, {
|
507
|
+
color: value
|
508
|
+
})
|
487
509
|
this.$refs.foreColor.hideLayer()
|
510
|
+
this.$parent.editor.formatElementStack()
|
511
|
+
this.$parent.editor.domRender()
|
512
|
+
this.$parent.editor.rangeRender()
|
488
513
|
},
|
489
514
|
//设置行高
|
490
515
|
setLineHeight(name, value) {
|
491
|
-
this.$parent
|
516
|
+
setLineHeight(this.$parent, value)
|
517
|
+
this.$parent.editor.formatElementStack()
|
518
|
+
this.$parent.editor.domRender()
|
519
|
+
this.$parent.editor.rangeRender()
|
492
520
|
},
|
493
521
|
//设置字体
|
494
522
|
setFontFamily(name, value) {
|
495
|
-
this.$parent
|
523
|
+
setTextStyle(this.$parent, {
|
524
|
+
'font-family': value
|
525
|
+
})
|
526
|
+
this.$parent.editor.formatElementStack()
|
527
|
+
this.$parent.editor.domRender()
|
528
|
+
this.$parent.editor.rangeRender()
|
496
529
|
},
|
497
530
|
//设置字号
|
498
531
|
setFontSize(name, value) {
|
499
|
-
this.$parent
|
532
|
+
setTextStyle(this.$parent, {
|
533
|
+
'font-size': value
|
534
|
+
})
|
535
|
+
this.$parent.editor.formatElementStack()
|
536
|
+
this.$parent.editor.domRender()
|
537
|
+
this.$parent.editor.rangeRender()
|
500
538
|
},
|
501
539
|
//设置上标
|
502
540
|
setSuperscript() {
|
503
|
-
this.$parent
|
541
|
+
if (queryTextStyle(this.$parent, 'vertical-align', 'super')) {
|
542
|
+
removeTextStyle(this.$parent, ['vertical-align'])
|
543
|
+
} else {
|
544
|
+
setTextStyle(this.$parent, {
|
545
|
+
'vertical-align': 'super'
|
546
|
+
})
|
547
|
+
}
|
548
|
+
this.$parent.editor.formatElementStack()
|
549
|
+
this.$parent.editor.domRender()
|
550
|
+
this.$parent.editor.rangeRender()
|
504
551
|
},
|
505
552
|
//设置下标
|
506
553
|
setSubscript() {
|
507
|
-
this.$parent
|
554
|
+
if (queryTextStyle(this.$parent, 'vertical-align', 'sub')) {
|
555
|
+
removeTextStyle(this.$parent, ['vertical-align'])
|
556
|
+
} else {
|
557
|
+
setTextStyle(this.$parent, {
|
558
|
+
'vertical-align': 'sub'
|
559
|
+
})
|
560
|
+
}
|
561
|
+
this.$parent.editor.formatElementStack()
|
562
|
+
this.$parent.editor.domRender()
|
563
|
+
this.$parent.editor.rangeRender()
|
508
564
|
},
|
509
565
|
//设置行内代码样式
|
510
566
|
setCodeStyle() {
|
511
|
-
this.$parent
|
567
|
+
if (queryTextMark(this.$parent, 'data-editify-code')) {
|
568
|
+
removeTextMark(this.$parent, ['data-editify-code'])
|
569
|
+
} else {
|
570
|
+
setTextMark(this.$parent, {
|
571
|
+
'data-editify-code': true
|
572
|
+
})
|
573
|
+
}
|
574
|
+
this.$parent.editor.formatElementStack()
|
575
|
+
this.$parent.editor.domRender()
|
576
|
+
this.$parent.editor.rangeRender()
|
512
577
|
},
|
513
578
|
//设置下划线
|
514
579
|
setUnderline() {
|
515
|
-
this.$parent
|
580
|
+
if (queryTextStyle(this.$parent, 'text-decoration', 'underline') || queryTextStyle(this.$parent, 'text-decoration-line', 'underline')) {
|
581
|
+
removeTextStyle(this.$parent, ['text-decoration', 'text-decoration-line'])
|
582
|
+
} else {
|
583
|
+
setTextStyle(this.$parent, {
|
584
|
+
'text-decoration': 'underline'
|
585
|
+
})
|
586
|
+
}
|
587
|
+
this.$parent.editor.formatElementStack()
|
588
|
+
this.$parent.editor.domRender()
|
589
|
+
this.$parent.editor.rangeRender()
|
516
590
|
},
|
517
591
|
//设置删除线
|
518
592
|
setStrikethrough() {
|
519
|
-
this.$parent
|
593
|
+
if (queryTextStyle(this.$parent, 'text-decoration', 'line-through') || queryTextStyle(this.$parent, 'text-decoration-line', 'line-through')) {
|
594
|
+
removeTextStyle(this.$parent, ['text-decoration', 'text-decoration-line'])
|
595
|
+
} else {
|
596
|
+
setTextStyle(this.$parent, {
|
597
|
+
'text-decoration': 'line-through'
|
598
|
+
})
|
599
|
+
}
|
600
|
+
this.$parent.editor.formatElementStack()
|
601
|
+
this.$parent.editor.domRender()
|
602
|
+
this.$parent.editor.rangeRender()
|
520
603
|
},
|
521
604
|
//设置列表
|
522
605
|
setList(name) {
|
523
|
-
this.$parent
|
606
|
+
setList(this.$parent, name == 'orderList')
|
607
|
+
this.$parent.editor.formatElementStack()
|
608
|
+
this.$parent.editor.domRender()
|
609
|
+
this.$parent.editor.rangeRender()
|
524
610
|
},
|
525
611
|
//设置任务列表
|
526
612
|
setTask() {
|
527
|
-
this.$parent
|
613
|
+
setTask(this.$parent)
|
614
|
+
this.$parent.editor.formatElementStack()
|
615
|
+
this.$parent.editor.domRender()
|
616
|
+
this.$parent.editor.rangeRender()
|
528
617
|
},
|
529
618
|
//斜体
|
530
619
|
setItalic() {
|
531
|
-
this.$parent
|
620
|
+
if (queryTextStyle(this.$parent, 'font-style', 'italic')) {
|
621
|
+
removeTextStyle(this.$parent, ['font-style'])
|
622
|
+
} else {
|
623
|
+
setTextStyle(this.$parent, {
|
624
|
+
'font-style': 'italic'
|
625
|
+
})
|
626
|
+
}
|
627
|
+
this.$parent.editor.formatElementStack()
|
628
|
+
this.$parent.editor.domRender()
|
629
|
+
this.$parent.editor.rangeRender()
|
532
630
|
},
|
533
631
|
//加粗
|
534
632
|
setBold() {
|
535
|
-
this.$parent
|
633
|
+
if (queryTextStyle(this.$parent, 'font-weight', 'bold') || queryTextStyle(this.$parent, 'font-weight', '700')) {
|
634
|
+
removeTextStyle(this.$parent, ['font-weight'])
|
635
|
+
} else {
|
636
|
+
setTextStyle(this.$parent, {
|
637
|
+
'font-weight': 'bold'
|
638
|
+
})
|
639
|
+
}
|
640
|
+
this.$parent.editor.formatElementStack()
|
641
|
+
this.$parent.editor.domRender()
|
642
|
+
this.$parent.editor.rangeRender()
|
536
643
|
},
|
537
644
|
//设置标题
|
538
645
|
setHeading(name, value) {
|
539
|
-
this.$parent
|
646
|
+
setHeading(this.$parent, value)
|
647
|
+
this.$parent.editor.formatElementStack()
|
648
|
+
this.$parent.editor.domRender()
|
649
|
+
this.$parent.editor.rangeRender()
|
540
650
|
},
|
541
651
|
//设置对齐方式
|
542
652
|
setAlign(name, value) {
|
543
|
-
this.$parent
|
653
|
+
setAlign(this.$parent, value)
|
654
|
+
this.$parent.editor.formatElementStack()
|
655
|
+
this.$parent.editor.domRender()
|
656
|
+
this.$parent.editor.rangeRender()
|
544
657
|
},
|
545
|
-
|
658
|
+
//设置视频属性
|
546
659
|
setVideo(prop) {
|
547
|
-
|
548
|
-
|
660
|
+
const element = this.$parent.editor.range.anchor.element
|
661
|
+
//当前是拥有该属性
|
662
|
+
if (this.videoConfig[prop]) {
|
663
|
+
delete element.marks[prop]
|
549
664
|
}
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
if (this.videoConfig[prop]) {
|
554
|
-
delete video.marks[prop]
|
555
|
-
}
|
556
|
-
//当前无该属性
|
557
|
-
else {
|
558
|
-
video.marks[prop] = true
|
559
|
-
}
|
560
|
-
this.videoConfig[prop] = !this.videoConfig[prop]
|
561
|
-
this.$parent.editor.domRender()
|
562
|
-
this.$parent.editor.rangeRender()
|
665
|
+
//当前无该属性
|
666
|
+
else {
|
667
|
+
element.marks[prop] = true
|
563
668
|
}
|
669
|
+
this.videoConfig[prop] = !this.videoConfig[prop]
|
670
|
+
this.$parent.editor.formatElementStack()
|
671
|
+
this.$parent.editor.domRender()
|
672
|
+
this.$parent.editor.rangeRender()
|
564
673
|
},
|
565
|
-
|
674
|
+
//设置图片或者视频宽度
|
566
675
|
setWidth(value) {
|
567
|
-
|
568
|
-
return
|
569
|
-
}
|
570
|
-
const element = this.$parent.getCurrentParsedomElement('img', true) || this.$parent.getCurrentParsedomElement('video', true)
|
676
|
+
const element = this.$parent.editor.range.anchor.element
|
571
677
|
if (element) {
|
572
678
|
const styles = {
|
573
679
|
width: value
|
@@ -588,13 +694,10 @@ export default {
|
|
588
694
|
},
|
589
695
|
//修改链接
|
590
696
|
modifyLink() {
|
591
|
-
if (this.$parent.disabled) {
|
592
|
-
return
|
593
|
-
}
|
594
697
|
if (!this.linkConfig.url) {
|
595
698
|
return
|
596
699
|
}
|
597
|
-
const link = this.$parent
|
700
|
+
const link = getCurrentParsedomElement(this.$parent, 'a')
|
598
701
|
if (link) {
|
599
702
|
link.marks.href = this.linkConfig.url
|
600
703
|
if (this.linkConfig.newOpen) {
|
@@ -606,28 +709,21 @@ export default {
|
|
606
709
|
this.$parent.editor.formatElementStack()
|
607
710
|
this.$parent.editor.domRender()
|
608
711
|
},
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
}
|
617
|
-
},
|
618
|
-
//输入框失去焦点
|
619
|
-
handleInputBlur(e) {
|
620
|
-
if (this.$parent.disabled) {
|
621
|
-
return
|
712
|
+
//移除链接
|
713
|
+
removeLink() {
|
714
|
+
const link = getCurrentParsedomElement(this.$parent, 'a')
|
715
|
+
if (link) {
|
716
|
+
link.parsedom = AlexElement.TEXT_NODE
|
717
|
+
delete link.marks.target
|
718
|
+
delete link.marks.href
|
622
719
|
}
|
623
|
-
|
720
|
+
this.$parent.editor.formatElementStack()
|
721
|
+
this.$parent.editor.domRender()
|
722
|
+
this.$parent.editor.rangeRender()
|
624
723
|
},
|
625
724
|
//选择代码语言
|
626
725
|
selectLanguage(name, value) {
|
627
|
-
|
628
|
-
return
|
629
|
-
}
|
630
|
-
const pre = this.$parent.getCurrentParsedomElement('pre', true)
|
726
|
+
const pre = getCurrentParsedomElement(this.$parent, 'pre')
|
631
727
|
if (pre) {
|
632
728
|
Object.assign(pre.marks, {
|
633
729
|
'data-editify-hljs': value
|
@@ -639,14 +735,11 @@ export default {
|
|
639
735
|
},
|
640
736
|
//代码块前后插入段落
|
641
737
|
insertParagraphWithPre(type = 'up') {
|
642
|
-
if (this.$parent.disabled) {
|
643
|
-
return
|
644
|
-
}
|
645
738
|
if (!this.$parent.editor.range.anchor.isEqual(this.$parent.editor.range.focus)) {
|
646
739
|
this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
|
647
740
|
this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
|
648
741
|
}
|
649
|
-
const pre = this.$parent
|
742
|
+
const pre = getCurrentParsedomElement(this.$parent, 'pre')
|
650
743
|
if (pre) {
|
651
744
|
const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
|
652
745
|
const breakEl = new AlexElement('closed', 'br', null, null, null)
|
@@ -665,16 +758,13 @@ export default {
|
|
665
758
|
},
|
666
759
|
//表格前后插入列
|
667
760
|
insertTableColumn(type = 'left') {
|
668
|
-
if (this.$parent.disabled) {
|
669
|
-
return
|
670
|
-
}
|
671
761
|
if (!this.$parent.editor.range.anchor.isEqual(this.$parent.editor.range.focus)) {
|
672
762
|
this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
|
673
763
|
this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
|
674
764
|
}
|
675
|
-
const table = this.$parent
|
676
|
-
const column = this.$parent
|
677
|
-
const tbody = this.$parent
|
765
|
+
const table = getCurrentParsedomElement(this.$parent, 'table')
|
766
|
+
const column = getCurrentParsedomElement(this.$parent, 'td')
|
767
|
+
const tbody = getCurrentParsedomElement(this.$parent, 'tbody')
|
678
768
|
if (column && table && tbody) {
|
679
769
|
const rows = tbody.children
|
680
770
|
const index = column.parent.children.findIndex(item => {
|
@@ -718,15 +808,12 @@ export default {
|
|
718
808
|
},
|
719
809
|
//表格前后插入行
|
720
810
|
insertTableRow(type = 'up') {
|
721
|
-
if (this.$parent.disabled) {
|
722
|
-
return
|
723
|
-
}
|
724
811
|
if (!this.$parent.editor.range.anchor.isEqual(this.$parent.editor.range.focus)) {
|
725
812
|
this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
|
726
813
|
this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
|
727
814
|
}
|
728
|
-
const table = this.$parent
|
729
|
-
const row = this.$parent
|
815
|
+
const table = getCurrentParsedomElement(this.$parent, 'table')
|
816
|
+
const row = getCurrentParsedomElement(this.$parent, 'tr')
|
730
817
|
if (table && row) {
|
731
818
|
const newRow = row.clone()
|
732
819
|
newRow.children.forEach(column => {
|
@@ -752,10 +839,7 @@ export default {
|
|
752
839
|
},
|
753
840
|
//表格前后插入段落
|
754
841
|
insertParagraphWithTable(type = 'up') {
|
755
|
-
|
756
|
-
return
|
757
|
-
}
|
758
|
-
const table = this.$parent.getCurrentParsedomElement('table', true)
|
842
|
+
const table = getCurrentParsedomElement(this.$parent, 'table')
|
759
843
|
if (table) {
|
760
844
|
const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
|
761
845
|
const breakEl = new AlexElement('closed', 'br', null, null, null)
|
@@ -774,19 +858,16 @@ export default {
|
|
774
858
|
},
|
775
859
|
//删除表格行
|
776
860
|
deleteTableRow() {
|
777
|
-
if (this.$parent.disabled) {
|
778
|
-
return
|
779
|
-
}
|
780
861
|
if (!this.$parent.editor.range.anchor.isEqual(this.$parent.editor.range.focus)) {
|
781
862
|
this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
|
782
863
|
this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
|
783
864
|
}
|
784
|
-
const table = this.$parent
|
785
|
-
const row = this.$parent
|
865
|
+
const table = getCurrentParsedomElement(this.$parent, 'table')
|
866
|
+
const row = getCurrentParsedomElement(this.$parent, 'tr')
|
786
867
|
if (table && row) {
|
787
868
|
const parent = row.parent
|
788
869
|
if (parent.children.length == 1) {
|
789
|
-
this
|
870
|
+
this.deleteElement('table')
|
790
871
|
return
|
791
872
|
}
|
792
873
|
const previousRow = this.$parent.editor.getPreviousElement(row)
|
@@ -810,21 +891,18 @@ export default {
|
|
810
891
|
},
|
811
892
|
//删除表格列
|
812
893
|
deleteTableColumn() {
|
813
|
-
if (this.$parent.disabled) {
|
814
|
-
return
|
815
|
-
}
|
816
894
|
if (!this.$parent.editor.range.anchor.isEqual(this.$parent.editor.range.focus)) {
|
817
895
|
this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
|
818
896
|
this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
|
819
897
|
}
|
820
|
-
const column = this.$parent
|
821
|
-
const tbody = this.$parent
|
822
|
-
const table = this.$parent
|
898
|
+
const column = getCurrentParsedomElement(this.$parent, 'td')
|
899
|
+
const tbody = getCurrentParsedomElement(this.$parent, 'tbody')
|
900
|
+
const table = getCurrentParsedomElement(this.$parent, 'table')
|
823
901
|
if (column && table && tbody) {
|
824
902
|
const rows = tbody.children
|
825
903
|
const parent = column.parent
|
826
904
|
if (parent.children.length == 1) {
|
827
|
-
this
|
905
|
+
this.deleteElement('table')
|
828
906
|
return
|
829
907
|
}
|
830
908
|
const previousColumn = this.$parent.editor.getPreviousElement(column)
|
@@ -854,20 +932,28 @@ export default {
|
|
854
932
|
this.$parent.editor.rangeRender()
|
855
933
|
}
|
856
934
|
},
|
935
|
+
//删除元素
|
936
|
+
deleteElement(parsedom) {
|
937
|
+
const element = getCurrentParsedomElement(this.$parent, parsedom)
|
938
|
+
if (element) {
|
939
|
+
element.toEmpty()
|
940
|
+
this.$parent.editor.formatElementStack()
|
941
|
+
this.$parent.editor.domRender()
|
942
|
+
this.$parent.editor.rangeRender()
|
943
|
+
}
|
944
|
+
},
|
857
945
|
//浮层显示时
|
858
946
|
layerShow() {
|
859
|
-
//获取选区的元素
|
860
|
-
const result = this.$parent.editor.getElementsByRange(true).includes
|
861
947
|
//代码块初始化展示设置
|
862
948
|
if (this.type == 'codeBlock') {
|
863
|
-
const pre = this.$parent
|
949
|
+
const pre = getCurrentParsedomElement(this.$parent, 'pre')
|
864
950
|
if (pre) {
|
865
951
|
this.languageConfig.displayConfig.value = pre.marks['data-editify-hljs'] || ''
|
866
952
|
}
|
867
953
|
}
|
868
954
|
//链接初始化展示
|
869
955
|
else if (this.type == 'link') {
|
870
|
-
const link = this.$parent
|
956
|
+
const link = getCurrentParsedomElement(this.$parent, 'a')
|
871
957
|
if (link) {
|
872
958
|
this.linkConfig.url = link.marks['href']
|
873
959
|
this.linkConfig.newOpen = link.marks['target'] == '_blank'
|
@@ -875,7 +961,7 @@ export default {
|
|
875
961
|
}
|
876
962
|
//视频初始化显示
|
877
963
|
else if (this.type == 'video') {
|
878
|
-
const video = this.$parent
|
964
|
+
const video = getCurrentParsedomElement(this.$parent, 'video')
|
879
965
|
if (video) {
|
880
966
|
this.videoConfig.autoplay = !!video.marks['autoplay']
|
881
967
|
this.videoConfig.loop = !!video.marks['loop']
|
@@ -895,17 +981,17 @@ export default {
|
|
895
981
|
//显示已设置标题
|
896
982
|
const findHeadingItem = this.headingConfig.displayConfig.options.find(item => {
|
897
983
|
let val = item
|
898
|
-
if (
|
984
|
+
if (DapCommon.isObject(item)) {
|
899
985
|
val = item.value
|
900
986
|
}
|
901
|
-
return
|
987
|
+
return this.$parent.dataRangeCaches.list.every(el => {
|
902
988
|
if (el.element.isBlock()) {
|
903
989
|
return el.element.parsedom == val
|
904
990
|
}
|
905
991
|
return el.element.getBlock().parsedom == val
|
906
992
|
})
|
907
993
|
})
|
908
|
-
this.headingConfig.displayConfig.value = findHeadingItem ? (
|
994
|
+
this.headingConfig.displayConfig.value = findHeadingItem ? (DapCommon.isObject(findHeadingItem) ? findHeadingItem.value : findHeadingItem) : this.headingConfig.defaultValue
|
909
995
|
//标题禁用
|
910
996
|
this.headingConfig.disabled = extraDisabled('heading')
|
911
997
|
|
@@ -913,84 +999,84 @@ export default {
|
|
913
999
|
this.alignConfig.disabled = extraDisabled('align')
|
914
1000
|
|
915
1001
|
//有序列表按钮激活
|
916
|
-
this.orderListConfig.active = this.$parent
|
1002
|
+
this.orderListConfig.active = isRangeInList(this.$parent, true)
|
917
1003
|
//有序列表按钮禁用
|
918
1004
|
this.orderListConfig.disabled = extraDisabled('orderList')
|
919
1005
|
|
920
1006
|
//无序列表按钮激活
|
921
|
-
this.unorderListConfig.active = this.$parent
|
1007
|
+
this.unorderListConfig.active = isRangeInList(this.$parent, false)
|
922
1008
|
//无序列表按钮禁用
|
923
1009
|
this.unorderListConfig.disabled = extraDisabled('unorderList')
|
924
1010
|
|
925
1011
|
//任务列表按钮激活
|
926
|
-
this.taskConfig.active = this.$parent
|
1012
|
+
this.taskConfig.active = isRangeInTask(this.$parent)
|
927
1013
|
//任务列表按钮禁用
|
928
1014
|
this.taskConfig.disabled = extraDisabled('task')
|
929
1015
|
|
930
1016
|
//粗体按钮激活
|
931
|
-
this.boldConfig.active = this.$parent
|
1017
|
+
this.boldConfig.active = queryTextStyle(this.$parent, 'font-weight', 'bold') || queryTextStyle(this.$parent, 'font-weight', '700')
|
932
1018
|
//粗体按钮禁用
|
933
1019
|
this.boldConfig.disabled = extraDisabled('bold')
|
934
1020
|
|
935
1021
|
//斜体按钮激活
|
936
|
-
this.italicConfig.active = this.$parent
|
1022
|
+
this.italicConfig.active = queryTextStyle(this.$parent, 'font-style', 'italic')
|
937
1023
|
//斜体按钮禁用
|
938
1024
|
this.italicConfig.disabled = extraDisabled('italic')
|
939
1025
|
|
940
1026
|
//删除线按钮激活
|
941
|
-
this.strikethroughConfig.active = this.$parent
|
1027
|
+
this.strikethroughConfig.active = queryTextStyle(this.$parent, 'text-decoration', 'line-through') || queryTextStyle(this.$parent, 'text-decoration-line', 'line-through')
|
942
1028
|
//删除线按钮禁用
|
943
1029
|
this.strikethroughConfig.disabled = extraDisabled('strikethrough')
|
944
1030
|
|
945
1031
|
//下划线按钮激活
|
946
|
-
this.underlineConfig.active = this.$parent
|
1032
|
+
this.underlineConfig.active = queryTextStyle(this.$parent, 'text-decoration', 'underline') || queryTextStyle(this.$parent, 'text-decoration-line', 'underline')
|
947
1033
|
//下划线按钮禁用
|
948
1034
|
this.underlineConfig.disabled = extraDisabled('underline')
|
949
1035
|
|
950
1036
|
//行内代码按钮激活
|
951
|
-
this.codeConfig.active = this.$parent
|
1037
|
+
this.codeConfig.active = queryTextMark(this.$parent, 'data-editify-code')
|
952
1038
|
//行内代码按钮禁用
|
953
1039
|
this.codeConfig.disabled = extraDisabled('code')
|
954
1040
|
|
955
1041
|
//上标按钮激活
|
956
|
-
this.superConfig.active = this.$parent
|
1042
|
+
this.superConfig.active = queryTextStyle(this.$parent, 'vertical-align', 'super')
|
957
1043
|
//上标按钮禁用
|
958
1044
|
this.superConfig.disabled = extraDisabled('super')
|
959
1045
|
|
960
1046
|
//下标按钮激活
|
961
|
-
this.subConfig.active = this.$parent
|
1047
|
+
this.subConfig.active = queryTextStyle(this.$parent, 'vertical-align', 'sub')
|
962
1048
|
//下标按钮禁用
|
963
1049
|
this.subConfig.disabled = extraDisabled('sub')
|
964
1050
|
|
965
1051
|
//显示已选择字号
|
966
1052
|
const findFontItem = this.fontSizeConfig.displayConfig.options.find(item => {
|
967
|
-
if (
|
968
|
-
return this.$parent
|
1053
|
+
if (DapCommon.isObject(item)) {
|
1054
|
+
return queryTextStyle(this.$parent, 'font-size', item.value)
|
969
1055
|
}
|
970
|
-
return this.$parent
|
1056
|
+
return queryTextStyle(this.$parent, 'font-size', item)
|
971
1057
|
})
|
972
|
-
this.fontSizeConfig.displayConfig.value = findFontItem ? (
|
1058
|
+
this.fontSizeConfig.displayConfig.value = findFontItem ? (DapCommon.isObject(findFontItem) ? findFontItem.value : findFontItem) : this.fontSizeConfig.defaultValue
|
973
1059
|
//字号按钮禁用
|
974
1060
|
this.fontSizeConfig.disabled = extraDisabled('fontSize')
|
975
1061
|
|
976
1062
|
//显示已选择字体
|
977
1063
|
const findFamilyItem = this.fontFamilyConfig.displayConfig.options.find(item => {
|
978
|
-
if (
|
979
|
-
return this.$parent
|
1064
|
+
if (DapCommon.isObject(item)) {
|
1065
|
+
return queryTextStyle(this.$parent, 'font-family', item.value)
|
980
1066
|
}
|
981
|
-
return this.$parent
|
1067
|
+
return queryTextStyle(this.$parent, 'font-family', item)
|
982
1068
|
})
|
983
|
-
this.fontFamilyConfig.displayConfig.value = findFamilyItem ? (
|
1069
|
+
this.fontFamilyConfig.displayConfig.value = findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? findFamilyItem.value : findFamilyItem) : this.fontFamilyConfig.defaultValue
|
984
1070
|
//字体按钮禁用
|
985
1071
|
this.fontFamilyConfig.disabled = extraDisabled('fontFamily')
|
986
1072
|
|
987
1073
|
//显示已设置行高
|
988
1074
|
const findHeightItem = this.lineHeightConfig.displayConfig.options.find(item => {
|
989
1075
|
let val = item
|
990
|
-
if (
|
1076
|
+
if (DapCommon.isObject(item)) {
|
991
1077
|
val = item.value
|
992
1078
|
}
|
993
|
-
return
|
1079
|
+
return this.$parent.dataRangeCaches.list.every(el => {
|
994
1080
|
if (el.element.isBlock() || el.element.isInblock()) {
|
995
1081
|
return el.element.hasStyles() && el.element.styles['line-height'] == val
|
996
1082
|
}
|
@@ -1002,29 +1088,29 @@ export default {
|
|
1002
1088
|
return block.hasStyles() && block.styles['line-height'] == val
|
1003
1089
|
})
|
1004
1090
|
})
|
1005
|
-
this.lineHeightConfig.displayConfig.value = findHeightItem ? (
|
1091
|
+
this.lineHeightConfig.displayConfig.value = findHeightItem ? (DapCommon.isObject(findHeightItem) ? findHeightItem.value : findHeightItem) : this.lineHeightConfig.defaultValue
|
1006
1092
|
//行高按钮禁用
|
1007
1093
|
this.lineHeightConfig.disabled = extraDisabled('lineHeight')
|
1008
1094
|
|
1009
1095
|
//显示已选择的前景色
|
1010
1096
|
const findForeColorItem = this.foreColorConfig.selectConfig.options.find(item => {
|
1011
|
-
if (
|
1012
|
-
return this.$parent
|
1097
|
+
if (DapCommon.isObject(item)) {
|
1098
|
+
return queryTextStyle(this.$parent, 'color', item.value)
|
1013
1099
|
}
|
1014
|
-
return this.$parent
|
1100
|
+
return queryTextStyle(this.$parent, 'color', item)
|
1015
1101
|
})
|
1016
|
-
this.foreColorConfig.value = findForeColorItem ? (
|
1102
|
+
this.foreColorConfig.value = findForeColorItem ? (DapCommon.isObject(findForeColorItem) ? findForeColorItem.value : findForeColorItem) : ''
|
1017
1103
|
//前景色按钮禁用
|
1018
1104
|
this.foreColorConfig.disabled = extraDisabled('foreColor')
|
1019
1105
|
|
1020
1106
|
//显示已选择的背景色
|
1021
1107
|
const findBackColorItem = this.backColorConfig.selectConfig.options.find(item => {
|
1022
|
-
if (
|
1023
|
-
return this.$parent
|
1108
|
+
if (DapCommon.isObject(item)) {
|
1109
|
+
return queryTextStyle(this.$parent, 'background-color', item.value)
|
1024
1110
|
}
|
1025
|
-
return this.$parent
|
1111
|
+
return queryTextStyle(this.$parent, 'background-color', item)
|
1026
1112
|
})
|
1027
|
-
this.backColorConfig.value = findBackColorItem ? (
|
1113
|
+
this.backColorConfig.value = findBackColorItem ? (DapCommon.isObject(findBackColorItem) ? findBackColorItem.value : findBackColorItem) : ''
|
1028
1114
|
//背景色按钮禁用
|
1029
1115
|
this.backColorConfig.disabled = extraDisabled('backColor')
|
1030
1116
|
|