1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<template>
<div>
<label class="col-3">
{{ $gettext('Feld für Serienmail einfügen') }}
<select v-model="selectedMarker">
<option value="">
-- {{ $gettext('Feld zum Einfügen auswählen') }} --
</option>
<option v-for="(marker, index) in markers"
:key="index"
:value="marker.marker"
:data-description="marker.description">
{{ marker.name }}
</option>
</select>
</label>
<button class="button col-3 insert-marker-button"
:title="$gettext('Feld einfügen')"
:disabled="selectedMarker === ''"
@click.prevent="insertMarker">
{{ $gettext('In den Text einfügen') }}
</button>
<p v-if="selectedMarker !== ''">
{{ description }}
</p>
</div>
</template>
<script>
export default {
name: 'SerialTextMarkers',
props: {
markers: {
type: Array,
required: true
},
editor: {
type: String,
required: true
}
},
data() {
return {
editorInstance: null,
selectedMarker: ''
}
},
computed: {
description() {
return this.markers.find((m) => { return m.marker === this.selectedMarker; }).description;
}
},
methods: {
insertMarker() {
this.editorInstance.model.change(writer => {
writer.insertText(
' {{' + this.selectedMarker + '}}',
this.editorInstance.model.document.selection.getFirstPosition()
);
});
}
},
mounted() {
STUDIP.eventBus.on('editor-loaded', editor => {
if (document.getElementById(this.editor) === editor.sourceElement) {
this.editorInstance = editor;
}
});
},
unmounted() {
STUDIP.eventBus.off('editor-loaded');
}
}
</script>
<style scoped>
button {
vertical-align: bottom;
}
</style>
|
