vue-editify 0.0.51 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/App.vue +25 -5594
- package/lib/editify.es.js +6859 -7821
- package/lib/editify.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/src/Editify.vue +273 -1255
- package/src/components/{bussiness/Menu.vue → Menu.vue} +235 -142
- 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} +62 -291
- 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
|
|