vue-editify 0.2.9 → 0.2.11
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +11 -6
- package/lib/components/button/button.vue.d.ts +271 -0
- package/lib/components/button/props.d.ts +4 -0
- package/lib/components/checkbox/checkbox.vue.d.ts +2 -2
- package/lib/components/layer/layer.vue.d.ts +12 -3
- package/lib/components/layer/props.d.ts +4 -0
- package/lib/components/menu/menu.vue.d.ts +12 -0
- package/lib/components/menu/props.d.ts +4 -0
- package/lib/components/toolbar/props.d.ts +8 -0
- package/lib/components/toolbar/toolbar.vue.d.ts +18 -0
- package/lib/components/tooltip/props.d.ts +4 -0
- package/lib/components/tooltip/tooltip.vue.d.ts +9 -0
- package/lib/core/tool.d.ts +7 -0
- package/lib/editify/editify.vue.d.ts +89 -28
- package/lib/editify/props.d.ts +8 -0
- package/lib/editify.es.js +456 -386
- package/lib/editify.umd.js +2 -2
- package/lib/hljs/index.d.ts +7 -4
- package/lib/index.d.ts +90 -29
- package/package.json +4 -4
- package/src/components/button/button.less +48 -48
- package/src/components/button/button.vue +4 -3
- package/src/components/button/props.ts +5 -0
- package/src/components/layer/layer.less +1 -1
- package/src/components/layer/layer.vue +94 -89
- package/src/components/layer/props.ts +6 -1
- package/src/components/menu/menu.less +0 -1
- package/src/components/menu/menu.vue +46 -70
- package/src/components/menu/props.ts +5 -0
- package/src/components/toolbar/props.ts +10 -0
- package/src/components/toolbar/toolbar.vue +49 -49
- package/src/components/tooltip/props.ts +5 -0
- package/src/components/tooltip/tooltip.less +7 -15
- package/src/components/tooltip/tooltip.vue +5 -7
- package/src/core/tool.ts +27 -1
- package/src/editify/editify.less +0 -5
- package/src/editify/editify.vue +10 -6
- package/src/editify/props.ts +10 -0
- package/src/hljs/index.ts +34 -28
- package/src/index.ts +1 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<Layer v-model="show" ref="layerRef" :node="node" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="
|
2
|
+
<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="zIndex">
|
3
3
|
<div class="editify-toolbar" ref="toolbarRef" :style="config.style">
|
4
4
|
<!-- 链接工具条 -->
|
5
5
|
<template v-if="type == 'link'">
|
@@ -18,191 +18,191 @@
|
|
18
18
|
<!-- 图片工具条 -->
|
19
19
|
<template v-else-if="type == 'image'">
|
20
20
|
<!-- 设置宽度30% -->
|
21
|
-
<Button @operate="setWidth('30%')" name="set30Width" :title="$editTrans('width30')" :tooltip="config.tooltip" :color="color"> 30% </Button>
|
21
|
+
<Button @operate="setWidth('30%')" name="set30Width" :title="$editTrans('width30')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 30% </Button>
|
22
22
|
<!-- 设置宽度50% -->
|
23
|
-
<Button @operate="setWidth('50%')" name="set50Width" :title="$editTrans('width50')" :tooltip="config.tooltip" :color="color"> 50% </Button>
|
23
|
+
<Button @operate="setWidth('50%')" name="set50Width" :title="$editTrans('width50')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 50% </Button>
|
24
24
|
<!-- 设置宽度100% -->
|
25
|
-
<Button rightBorder @operate="setWidth('100%')" name="set100Width" :title="$editTrans('width100')" :tooltip="config.tooltip" :color="color"> 100% </Button>
|
25
|
+
<Button rightBorder @operate="setWidth('100%')" name="set100Width" :title="$editTrans('width100')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 100% </Button>
|
26
26
|
<!-- 设置宽度auto -->
|
27
|
-
<Button @operate="setWidth('auto')" name="setAutoWidth" :title="$editTrans('auto')" :tooltip="config.tooltip" :color="color">
|
27
|
+
<Button @operate="setWidth('auto')" name="setAutoWidth" :title="$editTrans('auto')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
28
28
|
<Icon value="auto-width"></Icon>
|
29
29
|
</Button>
|
30
30
|
<!-- 删除图片 -->
|
31
|
-
<Button @operate="deleteElement('img')" name="deleteImage" :title="$editTrans('deleteImage')" :tooltip="config.tooltip" :color="color">
|
31
|
+
<Button @operate="deleteElement('img')" name="deleteImage" :title="$editTrans('deleteImage')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
32
32
|
<Icon value="delete"></Icon>
|
33
33
|
</Button>
|
34
34
|
</template>
|
35
35
|
<!-- 视频工具条 -->
|
36
36
|
<template v-else-if="type == 'video'">
|
37
37
|
<!-- 设置宽度30% -->
|
38
|
-
<Button @operate="setWidth('30%')" name="set30Width" :title="$editTrans('width30')" :tooltip="config.tooltip" :color="color"> 30% </Button>
|
38
|
+
<Button @operate="setWidth('30%')" name="set30Width" :title="$editTrans('width30')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 30% </Button>
|
39
39
|
<!-- 设置宽度50% -->
|
40
|
-
<Button @operate="setWidth('50%')" name="set50Width" :title="$editTrans('width50')" :tooltip="config.tooltip" :color="color"> 50% </Button>
|
40
|
+
<Button @operate="setWidth('50%')" name="set50Width" :title="$editTrans('width50')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 50% </Button>
|
41
41
|
<!-- 设置宽度100% -->
|
42
|
-
<Button @operate="setWidth('100%')" name="set100Width" :title="$editTrans('width100')" :tooltip="config.tooltip" :color="color"> 100% </Button>
|
42
|
+
<Button @operate="setWidth('100%')" name="set100Width" :title="$editTrans('width100')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1"> 100% </Button>
|
43
43
|
<!-- 设置宽度auto -->
|
44
|
-
<Button rightBorder @operate="setWidth('auto')" name="setAutoWidth" :title="$editTrans('auto')" :tooltip="config.tooltip" :color="color">
|
44
|
+
<Button rightBorder @operate="setWidth('auto')" name="setAutoWidth" :title="$editTrans('auto')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
45
45
|
<Icon value="auto-width"></Icon>
|
46
46
|
</Button>
|
47
47
|
<!-- 自动播放 -->
|
48
|
-
<Button @operate="setVideo" name="autoplay" :title="videoConfig.autoplay ? $editTrans('disabledAutoplay') : $editTrans('autoplay')" :tooltip="config.tooltip" :color="color">
|
48
|
+
<Button @operate="setVideo" name="autoplay" :title="videoConfig.autoplay ? $editTrans('disabledAutoplay') : $editTrans('autoplay')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
49
49
|
<Icon :value="videoConfig.autoplay ? 'autoplay' : 'stop'"></Icon>
|
50
50
|
</Button>
|
51
51
|
<!-- 循环播放 -->
|
52
|
-
<Button @operate="setVideo" name="loop" :title="videoConfig.loop ? $editTrans('disabledLoop') : $editTrans('loop')" :tooltip="config.tooltip" :color="color">
|
52
|
+
<Button @operate="setVideo" name="loop" :title="videoConfig.loop ? $editTrans('disabledLoop') : $editTrans('loop')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
53
53
|
<Icon :value="videoConfig.loop ? 'loop' : 'single'"></Icon>
|
54
54
|
</Button>
|
55
55
|
<!-- 是否静音 -->
|
56
|
-
<Button @operate="setVideo" name="muted" :title="videoConfig.muted ? $editTrans('unmuted') : $editTrans('muted')" :tooltip="config.tooltip" :color="color">
|
56
|
+
<Button @operate="setVideo" name="muted" :title="videoConfig.muted ? $editTrans('unmuted') : $editTrans('muted')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
57
57
|
<Icon :value="videoConfig.muted ? 'muted' : 'unmuted'"></Icon>
|
58
58
|
</Button>
|
59
59
|
<!-- 是否显示控制器 -->
|
60
|
-
<Button leftBorder @operate="setVideo" name="controls" :title="$editTrans('controls')" :tooltip="config.tooltip" :color="color">
|
60
|
+
<Button leftBorder @operate="setVideo" name="controls" :title="$editTrans('controls')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
61
61
|
<Icon value="controls"></Icon>
|
62
62
|
</Button>
|
63
63
|
<!-- 删除视频 -->
|
64
|
-
<Button @operate="deleteElement('video')" name="deleteVideo" :title="$editTrans('deleteVideo')" :tooltip="config.tooltip" :color="color">
|
64
|
+
<Button @operate="deleteElement('video')" name="deleteVideo" :title="$editTrans('deleteVideo')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
65
65
|
<Icon value="delete"></Icon>
|
66
66
|
</Button>
|
67
67
|
</template>
|
68
68
|
<!-- 表格工具条 -->
|
69
69
|
<template v-else-if="type == 'table'">
|
70
70
|
<!-- 表格前插入段落 -->
|
71
|
-
<Button @operate="insertParagraphWithTable('up')" name="textWrapUp" :title="$editTrans('textWrapUp')" :tooltip="config.tooltip" :color="color">
|
71
|
+
<Button @operate="insertParagraphWithTable('up')" name="textWrapUp" :title="$editTrans('textWrapUp')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
72
72
|
<Icon value="text-wrap" class="editify-icon-rotate"></Icon>
|
73
73
|
</Button>
|
74
74
|
<!-- 表格后插入段落 -->
|
75
|
-
<Button @operate="insertParagraphWithTable('down')" rightBorder name="textWrapDown" :title="$editTrans('textWrapDown')" :tooltip="config.tooltip" :color="color">
|
75
|
+
<Button @operate="insertParagraphWithTable('down')" rightBorder name="textWrapDown" :title="$editTrans('textWrapDown')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
76
76
|
<Icon value="text-wrap"></Icon>
|
77
77
|
</Button>
|
78
78
|
<!-- 向前插入行 -->
|
79
|
-
<Button @operate="insertTableRow('up')" name="insertRowTop" :title="$editTrans('insertRowTop')" :tooltip="config.tooltip" :color="color">
|
79
|
+
<Button @operate="insertTableRow('up')" name="insertRowTop" :title="$editTrans('insertRowTop')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
80
80
|
<Icon value="insert-row-top"></Icon>
|
81
81
|
</Button>
|
82
82
|
<!-- 向后插入行 -->
|
83
|
-
<Button @operate="insertTableRow('down')" name="insertRowBottom" :title="$editTrans('insertRowBottom')" :tooltip="config.tooltip" :color="color">
|
83
|
+
<Button @operate="insertTableRow('down')" name="insertRowBottom" :title="$editTrans('insertRowBottom')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
84
84
|
<Icon value="insert-row-bottom"></Icon>
|
85
85
|
</Button>
|
86
86
|
<!-- 删除行 -->
|
87
|
-
<Button @operate="deleteTableRow" rightBorder name="deleteRow" :title="$editTrans('deleteRow')" :tooltip="config.tooltip" :color="color">
|
87
|
+
<Button @operate="deleteTableRow" rightBorder name="deleteRow" :title="$editTrans('deleteRow')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
88
88
|
<Icon value="delete-row"></Icon>
|
89
89
|
</Button>
|
90
90
|
<!-- 向前插入列 -->
|
91
|
-
<Button @operate="insertTableColumn('left')" name="insertColumnLeft" :title="$editTrans('insertColumnLeft')" :tooltip="config.tooltip" :color="color">
|
91
|
+
<Button @operate="insertTableColumn('left')" name="insertColumnLeft" :title="$editTrans('insertColumnLeft')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
92
92
|
<Icon value="insert-column-left"></Icon>
|
93
93
|
</Button>
|
94
94
|
<!-- 向后插入列 -->
|
95
|
-
<Button @operate="insertTableColumn('right')" name="insertColumnRight" :title="$editTrans('insertColumnRight')" :tooltip="config.tooltip" :color="color">
|
95
|
+
<Button @operate="insertTableColumn('right')" name="insertColumnRight" :title="$editTrans('insertColumnRight')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
96
96
|
<Icon value="insert-column-right"></Icon>
|
97
97
|
</Button>
|
98
98
|
<!-- 删除列 -->
|
99
|
-
<Button @operate="deleteTableColumn" rightBorder name="deleteColumn" :title="$editTrans('deleteColumn')" :tooltip="config.tooltip" :color="color">
|
99
|
+
<Button @operate="deleteTableColumn" rightBorder name="deleteColumn" :title="$editTrans('deleteColumn')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
100
100
|
<Icon value="delete-column"></Icon>
|
101
101
|
</Button>
|
102
102
|
<!-- 向左合并单元格 -->
|
103
|
-
<Button :disabled="!canMergeCells('left')" @operate="mergeCells('left')" rightBorder name="mergeCellsLeft" :title="$editTrans('mergeCellsLeft')" :tooltip="config.tooltip" :color="color">
|
103
|
+
<Button :disabled="!canMergeCells('left')" @operate="mergeCells('left')" rightBorder name="mergeCellsLeft" :title="$editTrans('mergeCellsLeft')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
104
104
|
<Icon value="merge-cells-left"></Icon>
|
105
105
|
</Button>
|
106
106
|
<!-- 向右合并单元格 -->
|
107
|
-
<Button :disabled="!canMergeCells('right')" @operate="mergeCells('right')" rightBorder name="mergeCellsRight" :title="$editTrans('mergeCellsRight')" :tooltip="config.tooltip" :color="color">
|
107
|
+
<Button :disabled="!canMergeCells('right')" @operate="mergeCells('right')" rightBorder name="mergeCellsRight" :title="$editTrans('mergeCellsRight')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
108
108
|
<Icon value="merge-cells-right"></Icon>
|
109
109
|
</Button>
|
110
110
|
<!-- 向上合并单元格 -->
|
111
|
-
<Button :disabled="!canMergeCells('up')" @operate="mergeCells('up')" rightBorder name="mergeCellsUp" :title="$editTrans('mergeCellsUp')" :tooltip="config.tooltip" :color="color">
|
111
|
+
<Button :disabled="!canMergeCells('up')" @operate="mergeCells('up')" rightBorder name="mergeCellsUp" :title="$editTrans('mergeCellsUp')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
112
112
|
<Icon value="merge-cells-up"></Icon>
|
113
113
|
</Button>
|
114
114
|
<!-- 向下合并单元格 -->
|
115
|
-
<Button :disabled="!canMergeCells('down')" @operate="mergeCells('down')" rightBorder name="mergeCellsDown" :title="$editTrans('mergeCellsDown')" :tooltip="config.tooltip" :color="color">
|
115
|
+
<Button :disabled="!canMergeCells('down')" @operate="mergeCells('down')" rightBorder name="mergeCellsDown" :title="$editTrans('mergeCellsDown')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
116
116
|
<Icon value="merge-cells-down"></Icon>
|
117
117
|
</Button>
|
118
118
|
<!-- 删除表格 -->
|
119
|
-
<Button @operate="deleteElement('table')" leftBorder name="deleteTable" :title="$editTrans('deleteTable')" :tooltip="config.tooltip" :color="color">
|
119
|
+
<Button @operate="deleteElement('table')" leftBorder name="deleteTable" :title="$editTrans('deleteTable')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
120
120
|
<Icon value="delete-table"></Icon>
|
121
121
|
</Button>
|
122
122
|
</template>
|
123
123
|
<!-- 代码块工具条 -->
|
124
124
|
<template v-if="type == 'codeBlock'">
|
125
125
|
<!-- 代码块前插入段落 -->
|
126
|
-
<Button @operate="insertParagraphWithPre('up')" name="textWrapUp" :title="$editTrans('textWrapUp')" :tooltip="config.tooltip" :color="color">
|
126
|
+
<Button @operate="insertParagraphWithPre('up')" name="textWrapUp" :title="$editTrans('textWrapUp')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
127
127
|
<Icon value="text-wrap" class="editify-icon-rotate"></Icon>
|
128
128
|
</Button>
|
129
129
|
<!-- 代码块后插入段落 -->
|
130
|
-
<Button @operate="insertParagraphWithPre('down')" name="textWrapDown" :title="$editTrans('textWrapDown')" :tooltip="config.tooltip" :color="color">
|
130
|
+
<Button @operate="insertParagraphWithPre('down')" name="textWrapDown" :title="$editTrans('textWrapDown')" :tooltip="config.tooltip" :color="color" :z-index="zIndex + 1">
|
131
131
|
<Icon value="text-wrap"></Icon>
|
132
132
|
</Button>
|
133
133
|
<!-- 代码块语言选择 -->
|
134
|
-
<Button v-if="languageConfig.show" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage"></Button>
|
134
|
+
<Button v-if="languageConfig.show" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage" :z-index="zIndex + 1"></Button>
|
135
135
|
</template>
|
136
136
|
<!-- 文本工具条 -->
|
137
137
|
<template v-else-if="type == 'text'">
|
138
138
|
<!-- 设置段落和标题 -->
|
139
|
-
<Button v-if="headingConfig.show" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading"></Button>
|
139
|
+
<Button v-if="headingConfig.show" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading" :z-index="zIndex + 1"></Button>
|
140
140
|
<!-- 对齐方式 -->
|
141
|
-
<Button v-if="alignConfig.show" name="align" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign">
|
141
|
+
<Button v-if="alignConfig.show" name="align" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign" :z-index="zIndex + 1">
|
142
142
|
<Icon value="align-left"></Icon>
|
143
143
|
</Button>
|
144
144
|
<!-- 有序列表 -->
|
145
|
-
<Button v-if="orderListConfig.show" name="orderList" :title="$editTrans('orderList')" :tooltip="config.tooltip" :leftBorder="orderListConfig.leftBorder" :rightBorder="orderListConfig.rightBorder" :color="color" :active="orderListConfig.active" :disabled="orderListConfig.disabled" @operate="_setList">
|
145
|
+
<Button v-if="orderListConfig.show" name="orderList" :title="$editTrans('orderList')" :tooltip="config.tooltip" :leftBorder="orderListConfig.leftBorder" :rightBorder="orderListConfig.rightBorder" :color="color" :active="orderListConfig.active" :disabled="orderListConfig.disabled" @operate="_setList" :z-index="zIndex + 1">
|
146
146
|
<Icon value="list-ordered"></Icon>
|
147
147
|
</Button>
|
148
148
|
<!-- 无序列表 -->
|
149
|
-
<Button v-if="unorderListConfig.show" name="unorderList" :title="$editTrans('unorderList')" :tooltip="config.tooltip" :leftBorder="unorderListConfig.leftBorder" :rightBorder="unorderListConfig.rightBorder" :color="color" :active="unorderListConfig.active" :disabled="unorderListConfig.disabled" @operate="_setList">
|
149
|
+
<Button v-if="unorderListConfig.show" name="unorderList" :title="$editTrans('unorderList')" :tooltip="config.tooltip" :leftBorder="unorderListConfig.leftBorder" :rightBorder="unorderListConfig.rightBorder" :color="color" :active="unorderListConfig.active" :disabled="unorderListConfig.disabled" @operate="_setList" :z-index="zIndex + 1">
|
150
150
|
<Icon value="list-unordered"></Icon>
|
151
151
|
</Button>
|
152
152
|
<!-- 任务列表 -->
|
153
|
-
<Button v-if="taskConfig.show" name="task" :title="$editTrans('task')" :tooltip="config.tooltip" :leftBorder="taskConfig.leftBorder" :rightBorder="taskConfig.rightBorder" :color="color" :active="taskConfig.active" :disabled="taskConfig.disabled" @operate="_setTask">
|
153
|
+
<Button v-if="taskConfig.show" name="task" :title="$editTrans('task')" :tooltip="config.tooltip" :leftBorder="taskConfig.leftBorder" :rightBorder="taskConfig.rightBorder" :color="color" :active="taskConfig.active" :disabled="taskConfig.disabled" @operate="_setTask" :z-index="zIndex + 1">
|
154
154
|
<Icon value="task"></Icon>
|
155
155
|
</Button>
|
156
156
|
<!-- 加粗 -->
|
157
|
-
<Button v-if="boldConfig.show" name="bold" :title="$editTrans('bold')" :tooltip="config.tooltip" :leftBorder="boldConfig.leftBorder" :rightBorder="boldConfig.rightBorder" :color="color" :active="boldConfig.active" :disabled="boldConfig.disabled" @operate="setBold">
|
157
|
+
<Button v-if="boldConfig.show" name="bold" :title="$editTrans('bold')" :tooltip="config.tooltip" :leftBorder="boldConfig.leftBorder" :rightBorder="boldConfig.rightBorder" :color="color" :active="boldConfig.active" :disabled="boldConfig.disabled" @operate="setBold" :z-index="zIndex + 1">
|
158
158
|
<Icon value="bold"></Icon>
|
159
159
|
</Button>
|
160
160
|
<!-- 斜体 -->
|
161
|
-
<Button v-if="italicConfig.show" name="italic" :title="$editTrans('italic')" :tooltip="config.tooltip" :leftBorder="italicConfig.leftBorder" :rightBorder="italicConfig.rightBorder" :color="color" :active="italicConfig.active" :disabled="italicConfig.disabled" @operate="setItalic">
|
161
|
+
<Button v-if="italicConfig.show" name="italic" :title="$editTrans('italic')" :tooltip="config.tooltip" :leftBorder="italicConfig.leftBorder" :rightBorder="italicConfig.rightBorder" :color="color" :active="italicConfig.active" :disabled="italicConfig.disabled" @operate="setItalic" :z-index="zIndex + 1">
|
162
162
|
<Icon value="italic"></Icon>
|
163
163
|
</Button>
|
164
164
|
<!-- 删除线 -->
|
165
|
-
<Button v-if="strikethroughConfig.show" name="strikethrough" :title="$editTrans('strikethrough')" :tooltip="config.tooltip" :leftBorder="strikethroughConfig.leftBorder" :rightBorder="strikethroughConfig.rightBorder" :color="color" :active="strikethroughConfig.active" :disabled="strikethroughConfig.disabled" @operate="setStrikethrough">
|
165
|
+
<Button v-if="strikethroughConfig.show" name="strikethrough" :title="$editTrans('strikethrough')" :tooltip="config.tooltip" :leftBorder="strikethroughConfig.leftBorder" :rightBorder="strikethroughConfig.rightBorder" :color="color" :active="strikethroughConfig.active" :disabled="strikethroughConfig.disabled" @operate="setStrikethrough" :z-index="zIndex + 1">
|
166
166
|
<Icon value="strikethrough"></Icon>
|
167
167
|
</Button>
|
168
168
|
<!-- 下划线 -->
|
169
|
-
<Button v-if="underlineConfig.show" name="underline" :title="$editTrans('underline')" :tooltip="config.tooltip" :leftBorder="underlineConfig.leftBorder" :rightBorder="underlineConfig.rightBorder" :color="color" :active="underlineConfig.active" :disabled="underlineConfig.disabled" @operate="setUnderline">
|
169
|
+
<Button v-if="underlineConfig.show" name="underline" :title="$editTrans('underline')" :tooltip="config.tooltip" :leftBorder="underlineConfig.leftBorder" :rightBorder="underlineConfig.rightBorder" :color="color" :active="underlineConfig.active" :disabled="underlineConfig.disabled" @operate="setUnderline" :z-index="zIndex + 1">
|
170
170
|
<Icon value="underline"></Icon>
|
171
171
|
</Button>
|
172
172
|
<!-- 行内代码块 -->
|
173
|
-
<Button v-if="codeConfig.show" name="code" :title="$editTrans('code')" :tooltip="config.tooltip" :leftBorder="codeConfig.leftBorder" :rightBorder="codeConfig.rightBorder" :color="color" :active="codeConfig.active" :disabled="codeConfig.disabled" @operate="setCodeStyle">
|
173
|
+
<Button v-if="codeConfig.show" name="code" :title="$editTrans('code')" :tooltip="config.tooltip" :leftBorder="codeConfig.leftBorder" :rightBorder="codeConfig.rightBorder" :color="color" :active="codeConfig.active" :disabled="codeConfig.disabled" @operate="setCodeStyle" :z-index="zIndex + 1">
|
174
174
|
<Icon value="code"></Icon>
|
175
175
|
</Button>
|
176
176
|
<!-- 上标 -->
|
177
|
-
<Button v-if="superConfig.show" name="superscript" :title="$editTrans('superscript')" :tooltip="config.tooltip" :leftBorder="superConfig.leftBorder" :rightBorder="superConfig.rightBorder" :color="color" :active="superConfig.active" :disabled="superConfig.disabled" @operate="setSuperscript">
|
177
|
+
<Button v-if="superConfig.show" name="superscript" :title="$editTrans('superscript')" :tooltip="config.tooltip" :leftBorder="superConfig.leftBorder" :rightBorder="superConfig.rightBorder" :color="color" :active="superConfig.active" :disabled="superConfig.disabled" @operate="setSuperscript" :z-index="zIndex + 1">
|
178
178
|
<Icon value="superscript"></Icon>
|
179
179
|
</Button>
|
180
180
|
<!-- 下标 -->
|
181
|
-
<Button v-if="subConfig.show" name="subscript" :title="$editTrans('subscript')" :tooltip="config.tooltip" :leftBorder="subConfig.leftBorder" :rightBorder="subConfig.rightBorder" :color="color" :active="subConfig.active" :disabled="subConfig.disabled" @operate="setSubscript">
|
181
|
+
<Button v-if="subConfig.show" name="subscript" :title="$editTrans('subscript')" :tooltip="config.tooltip" :leftBorder="subConfig.leftBorder" :rightBorder="subConfig.rightBorder" :color="color" :active="subConfig.active" :disabled="subConfig.disabled" @operate="setSubscript" :z-index="zIndex + 1">
|
182
182
|
<Icon value="subscript"></Icon>
|
183
183
|
</Button>
|
184
184
|
<!-- 字号大小 -->
|
185
|
-
<Button v-if="fontSizeConfig.show" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize"></Button>
|
185
|
+
<Button v-if="fontSizeConfig.show" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize" :z-index="zIndex + 1"></Button>
|
186
186
|
<!-- 字体 -->
|
187
|
-
<Button v-if="fontFamilyConfig.show" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily"></Button>
|
187
|
+
<Button v-if="fontFamilyConfig.show" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily" :z-index="zIndex + 1"></Button>
|
188
188
|
<!-- 行高 -->
|
189
|
-
<Button v-if="lineHeightConfig.show" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight"></Button>
|
189
|
+
<Button v-if="lineHeightConfig.show" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight" :z-index="zIndex + 1"></Button>
|
190
190
|
<!-- 前景色 -->
|
191
|
-
<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorRef">
|
191
|
+
<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorRef" :z-index="zIndex + 1">
|
192
192
|
<Icon value="font-color"></Icon>
|
193
193
|
<template #layer="{ options }">
|
194
194
|
<Colors :tooltip="config.tooltip" :color="color" :value="foreColorConfig.value" @change="setForeColor" :data="options"></Colors>
|
195
195
|
</template>
|
196
196
|
</Button>
|
197
197
|
<!-- 背景色 -->
|
198
|
-
<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorRef">
|
198
|
+
<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorRef" :z-index="zIndex + 1">
|
199
199
|
<Icon value="brush"></Icon>
|
200
200
|
<template #layer="{ options }">
|
201
201
|
<Colors :tooltip="config.tooltip" :color="color" :value="backColorConfig.value" @change="setBackColor" :data="options"></Colors>
|
202
202
|
</template>
|
203
203
|
</Button>
|
204
204
|
<!-- 清除样式 -->
|
205
|
-
<Button v-if="formatClearConfig.show" name="formatClear" :title="$editTrans('formatClear')" :tooltip="config.tooltip" :leftBorder="formatClearConfig.leftBorder" :rightBorder="formatClearConfig.rightBorder" :color="color" :active="formatClearConfig.active" :disabled="formatClearConfig.disabled" @operate="clearFormat">
|
205
|
+
<Button v-if="formatClearConfig.show" name="formatClear" :title="$editTrans('formatClear')" :tooltip="config.tooltip" :leftBorder="formatClearConfig.leftBorder" :rightBorder="formatClearConfig.rightBorder" :color="color" :active="formatClearConfig.active" :disabled="formatClearConfig.disabled" @operate="clearFormat" :z-index="zIndex + 1">
|
206
206
|
<Icon value="format-clear"></Icon>
|
207
207
|
</Button>
|
208
208
|
</template>
|
@@ -2,22 +2,14 @@
|
|
2
2
|
position: relative;
|
3
3
|
display: inline-block;
|
4
4
|
|
5
|
-
.editify-tooltip-target {
|
6
|
-
display: inline-block;
|
7
|
-
}
|
8
|
-
|
9
|
-
.editify-tooltip-content {
|
10
|
-
display: block;
|
11
|
-
padding: 4px 6px;
|
12
|
-
font-size: 12px;
|
13
|
-
white-space: nowrap;
|
14
|
-
}
|
15
|
-
|
16
5
|
&.editify-block {
|
17
6
|
display: block;
|
18
|
-
|
19
|
-
.editify-tooltip-target {
|
20
|
-
display: block;
|
21
|
-
}
|
22
7
|
}
|
23
8
|
}
|
9
|
+
|
10
|
+
.editify-tooltip-content {
|
11
|
+
display: block;
|
12
|
+
padding: 4px 6px;
|
13
|
+
font-size: 12px;
|
14
|
+
white-space: nowrap;
|
15
|
+
}
|
@@ -1,12 +1,10 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="editify-tooltip" :class="{ 'editify-block': block }">
|
3
|
-
<
|
4
|
-
<slot></slot>
|
5
|
-
</div>
|
6
|
-
<Layer v-model="show" :node="targetRef" border :border-color="isDark ? '#e8e8e8' : '#1a1a1a'" :background="isDark ? '#e8e8e8' : '#1a1a1a'" show-triangle :color="isDark ? '#1a1a1a' : '#e8e8e8'" placement="bottom" animation="fade" :z-index="10">
|
7
|
-
<div class="editify-tooltip-content">{{ content }}</div>
|
8
|
-
</Layer>
|
2
|
+
<div ref="targetRef" class="editify-tooltip" :class="{ 'editify-block': block }" @mouseenter="showContent" @mouseleave="hideContent">
|
3
|
+
<slot></slot>
|
9
4
|
</div>
|
5
|
+
<Layer v-model="show" :node="targetRef" border :border-color="isDark ? '#e8e8e8' : '#1a1a1a'" :background="isDark ? '#e8e8e8' : '#1a1a1a'" show-triangle :color="isDark ? '#1a1a1a' : '#e8e8e8'" placement="bottom" animation="fade" :z-index="zIndex">
|
6
|
+
<div class="editify-tooltip-content">{{ content }}</div>
|
7
|
+
</Layer>
|
10
8
|
</template>
|
11
9
|
<script setup lang="ts">
|
12
10
|
import { ComputedRef, inject, ref } from 'vue'
|
package/src/core/tool.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
|
1
|
+
import { common as DapCommon, string as DapString, color as DapColor, element as DapElement } from 'dap-util'
|
2
2
|
import { App, Component, ComponentInternalInstance, VNode } from 'vue'
|
3
3
|
import { AlexElement } from 'alex-editor'
|
4
4
|
import { languages } from '@/hljs'
|
@@ -1165,3 +1165,29 @@ export const withInstall = <T extends Component>(component: T) => {
|
|
1165
1165
|
}
|
1166
1166
|
return component as SFCWithInstall<typeof component>
|
1167
1167
|
}
|
1168
|
+
|
1169
|
+
/**
|
1170
|
+
* 是否点击了编辑器以外的元素
|
1171
|
+
* @param editor
|
1172
|
+
* @param el
|
1173
|
+
* @returns
|
1174
|
+
*/
|
1175
|
+
export const clickIsOut = (editor: HTMLElement, el: HTMLElement) => {
|
1176
|
+
if (DapElement.isContains(editor, el)) {
|
1177
|
+
return false
|
1178
|
+
}
|
1179
|
+
const hasClass = (elm: HTMLElement): boolean => {
|
1180
|
+
const flag = Array.from(elm.classList).some(cls => cls == 'editify-layer')
|
1181
|
+
if (flag) {
|
1182
|
+
return true
|
1183
|
+
}
|
1184
|
+
if (!elm.parentElement) {
|
1185
|
+
return false
|
1186
|
+
}
|
1187
|
+
return hasClass(elm.parentElement)
|
1188
|
+
}
|
1189
|
+
if (hasClass(el)) {
|
1190
|
+
return false
|
1191
|
+
}
|
1192
|
+
return true
|
1193
|
+
}
|
package/src/editify/editify.less
CHANGED
@@ -21,7 +21,6 @@
|
|
21
21
|
|
22
22
|
&.editify-fullscreen {
|
23
23
|
position: fixed;
|
24
|
-
z-index: 1000;
|
25
24
|
left: 0;
|
26
25
|
top: 0;
|
27
26
|
width: 100vw !important;
|
@@ -357,7 +356,6 @@
|
|
357
356
|
}
|
358
357
|
}
|
359
358
|
}
|
360
|
-
|
361
359
|
//附件样式
|
362
360
|
:deep(span[data-editify-attachment]) {
|
363
361
|
display: inline;
|
@@ -386,7 +384,6 @@
|
|
386
384
|
cursor: pointer;
|
387
385
|
}
|
388
386
|
}
|
389
|
-
|
390
387
|
//数学公式样式
|
391
388
|
:deep(span[data-editify-mathformula]) {
|
392
389
|
display: inline-block;
|
@@ -408,7 +405,6 @@
|
|
408
405
|
background: var(--editify-background-darker);
|
409
406
|
}
|
410
407
|
}
|
411
|
-
|
412
408
|
//面板样式
|
413
409
|
:deep(div[data-editify-panel]) {
|
414
410
|
display: block;
|
@@ -433,7 +429,6 @@
|
|
433
429
|
}
|
434
430
|
}
|
435
431
|
}
|
436
|
-
|
437
432
|
//信息块样式
|
438
433
|
:deep(div[data-editify-info]) {
|
439
434
|
display: block;
|
package/src/editify/editify.vue
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" ref="elRef">
|
2
|
+
<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" :style="{ zIndex: zIndex, paddingTop: (offset || '') + 'px' }" ref="elRef">
|
3
3
|
<!-- 菜单区域 -->
|
4
|
-
<Menu v-if="menuConfig.use" :config="menuConfig" :color="color"
|
4
|
+
<Menu ref="menuRef" v-if="menuConfig.use" :config="menuConfig" :color="color" :z-index="zIndex + 1"></Menu>
|
5
5
|
<!-- 编辑层,与编辑区域宽高相同必须适配 -->
|
6
6
|
<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
|
7
7
|
<!-- 编辑器 -->
|
@@ -9,10 +9,10 @@
|
|
9
9
|
<!-- 代码视图 -->
|
10
10
|
<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
|
11
11
|
<!-- 工具条 -->
|
12
|
-
<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :config="toolbarConfig" :color="color"></Toolbar>
|
12
|
+
<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :scroll-node="contentRef!" :config="toolbarConfig" :color="color" :z-index="zIndex + 10"></Toolbar>
|
13
13
|
</div>
|
14
14
|
<!-- 编辑器尾部 -->
|
15
|
-
<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" ref="footerRef">
|
15
|
+
<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" ref="footerRef" :style="{ zIndex: zIndex + 1 }">
|
16
16
|
<!-- 字数统计 -->
|
17
17
|
<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
|
18
18
|
</div>
|
@@ -22,7 +22,7 @@
|
|
22
22
|
import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
|
23
23
|
import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType } from 'alex-editor'
|
24
24
|
import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor } from 'dap-util'
|
25
|
-
import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType } from '@/core/tool'
|
25
|
+
import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType, clickIsOut } from '@/core/tool'
|
26
26
|
import { parseList, orderdListHandle, commonElementHandle, tableThTdHandle, tableFormatHandle, tableRangeMergedHandle, preHandle, specialInblockHandle } from '@/core/rule'
|
27
27
|
import { isTask, elementToParagraph, getMatchElementByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '@/core/function'
|
28
28
|
import Toolbar from '@/components/toolbar/toolbar.vue'
|
@@ -137,6 +137,8 @@ const menuConfig = computed<MenuConfigType>(() => {
|
|
137
137
|
})
|
138
138
|
//是否深色模式
|
139
139
|
const isDark = computed<boolean>(() => props.dark)
|
140
|
+
//编辑器菜单栏区域高度
|
141
|
+
const menuHeight = computed<number | null>(() => (menuRef.value ? menuRef.value.height : null))
|
140
142
|
|
141
143
|
//编辑器内部修改值的方法
|
142
144
|
const internalModify = (val: string) => {
|
@@ -386,7 +388,7 @@ const documentMouseDown = (e: Event) => {
|
|
386
388
|
}
|
387
389
|
}
|
388
390
|
//如果点击了除编辑器外的地方,菜单栏不可使用
|
389
|
-
if (
|
391
|
+
if (clickIsOut(elRef.value!, elm) && !isSourceView.value) {
|
390
392
|
canUseMenu.value = false
|
391
393
|
}
|
392
394
|
}
|
@@ -835,6 +837,7 @@ const handleRangeUpdate = () => {
|
|
835
837
|
}
|
836
838
|
//如果没有range禁用菜单栏
|
837
839
|
canUseMenu.value = !!editor.value!.range
|
840
|
+
|
838
841
|
//没有range直接返回
|
839
842
|
if (!editor.value!.range) {
|
840
843
|
return
|
@@ -1051,6 +1054,7 @@ defineExpose({
|
|
1051
1054
|
canUseMenu,
|
1052
1055
|
dataRangeCaches,
|
1053
1056
|
textValue,
|
1057
|
+
menuHeight,
|
1054
1058
|
collapseToEnd,
|
1055
1059
|
collapseToStart,
|
1056
1060
|
undo,
|
package/src/editify/props.ts
CHANGED
@@ -169,6 +169,16 @@ export const EditifyProps = {
|
|
169
169
|
dark: {
|
170
170
|
type: Boolean,
|
171
171
|
default: false
|
172
|
+
},
|
173
|
+
//编辑器基本z-index
|
174
|
+
zIndex: {
|
175
|
+
type: Number,
|
176
|
+
default: 1
|
177
|
+
},
|
178
|
+
//编辑器内容区域距离编辑器上边缘的距离
|
179
|
+
offset: {
|
180
|
+
type: Number,
|
181
|
+
default: 0
|
172
182
|
}
|
173
183
|
}
|
174
184
|
|
package/src/hljs/index.ts
CHANGED
@@ -28,6 +28,13 @@ import shell from 'highlight.js/lib/languages/shell'
|
|
28
28
|
import r from 'highlight.js/lib/languages/r'
|
29
29
|
import kotlin from 'highlight.js/lib/languages/kotlin'
|
30
30
|
import rust from 'highlight.js/lib/languages/rust'
|
31
|
+
//引入css样式主题
|
32
|
+
import '../css/hljs.less'
|
33
|
+
//import 'highlight.js/styles/github.css'
|
34
|
+
//import 'highlight.js/styles/atom-one-light.css'
|
35
|
+
//import 'highlight.js/styles/lightfair.css'
|
36
|
+
//import 'highlight.js/styles/color-brewer.css'
|
37
|
+
|
31
38
|
//注册语言
|
32
39
|
hljs.registerLanguage('plaintext', plaintext)
|
33
40
|
hljs.registerLanguage('json', json)
|
@@ -56,39 +63,14 @@ hljs.registerLanguage('shell', shell)
|
|
56
63
|
hljs.registerLanguage('r', r)
|
57
64
|
hljs.registerLanguage('kotlin', kotlin)
|
58
65
|
hljs.registerLanguage('rust', rust)
|
59
|
-
//引入css样式主题
|
60
|
-
import '../css/hljs.less'
|
61
|
-
//import 'highlight.js/styles/github.css'
|
62
|
-
//import 'highlight.js/styles/atom-one-light.css'
|
63
|
-
//import 'highlight.js/styles/lightfair.css'
|
64
|
-
//import 'highlight.js/styles/color-brewer.css'
|
65
|
-
//全局设置
|
66
|
-
hljs.configure({
|
67
|
-
cssSelector: 'pre',
|
68
|
-
classPrefix: 'editify-hljs-',
|
69
|
-
ignoreUnescapedHTML: true
|
70
|
-
})
|
71
66
|
|
67
|
+
/**
|
68
|
+
* 语言选项类型
|
69
|
+
*/
|
72
70
|
export type LanguagesItemType = {
|
73
71
|
label?: string
|
74
72
|
value?: string
|
75
73
|
}
|
76
|
-
|
77
|
-
/**
|
78
|
-
* 获取经过hljs处理的html元素
|
79
|
-
* @param code
|
80
|
-
* @param language
|
81
|
-
* @returns
|
82
|
-
*/
|
83
|
-
export const getHljsHtml = function (code: string, language: string) {
|
84
|
-
if (language) {
|
85
|
-
return hljs.highlight(code, {
|
86
|
-
language: language,
|
87
|
-
ignoreIllegals: true
|
88
|
-
}).value
|
89
|
-
}
|
90
|
-
return hljs.highlightAuto(code).value
|
91
|
-
}
|
92
74
|
/**
|
93
75
|
* 可选择语言列表
|
94
76
|
*/
|
@@ -202,3 +184,27 @@ export const languages: LanguagesItemType[] = [
|
|
202
184
|
value: 'rust'
|
203
185
|
}
|
204
186
|
]
|
187
|
+
|
188
|
+
//全局设置
|
189
|
+
hljs.configure({
|
190
|
+
cssSelector: 'pre',
|
191
|
+
classPrefix: 'editify-hljs-',
|
192
|
+
languages: languages.map(item => item.value!),
|
193
|
+
ignoreUnescapedHTML: true
|
194
|
+
})
|
195
|
+
|
196
|
+
/**
|
197
|
+
* 获取经过hljs处理的html元素
|
198
|
+
* @param code
|
199
|
+
* @param language
|
200
|
+
* @returns
|
201
|
+
*/
|
202
|
+
export const getHljsHtml = function (code: string, language: string) {
|
203
|
+
if (language) {
|
204
|
+
return hljs.highlight(code, {
|
205
|
+
language: language,
|
206
|
+
ignoreIllegals: true
|
207
|
+
}).value
|
208
|
+
}
|
209
|
+
return hljs.highlightAuto(code).value
|
210
|
+
}
|