mirror of
https://github.com/knadh/listmonk.git
synced 2025-10-09 23:06:36 +08:00
Add F9 shortcut key for toggling campaign and template previews.
This commit is contained in:
parent
234fd11f13
commit
bd2990fb02
2 changed files with 37 additions and 8 deletions
|
@ -29,7 +29,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6 has-text-right">
|
<div class="column is-6 has-text-right">
|
||||||
<b-button @click="onTogglePreview" type="is-primary" icon-left="file-find-outline" data-cy="btn-preview">
|
<b-button @click="onTogglePreview" type="is-primary" icon-left="file-find-outline" data-cy="btn-preview">
|
||||||
{{ $t('campaigns.preview') }}
|
{{ $t('campaigns.preview') }} (F9)
|
||||||
</b-button>
|
</b-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -231,6 +231,13 @@ export default {
|
||||||
editor.on('CloseWindow', () => {
|
editor.on('CloseWindow', () => {
|
||||||
editor.selection.getNode().scrollIntoView(false);
|
editor.selection.getNode().scrollIntoView(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
editor.on('keydown', (e) => {
|
||||||
|
if (e.key === 'F9') {
|
||||||
|
this.onTogglePreview();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
browser_spellcheck: true,
|
browser_spellcheck: true,
|
||||||
|
@ -400,6 +407,13 @@ export default {
|
||||||
this.runTinyMceImageCallback(media.url);
|
this.runTinyMceImageCallback(media.url);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onPreviewShortcut(e) {
|
||||||
|
if (e.key === 'F9') {
|
||||||
|
this.onTogglePreview();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
beautifyHTML(str) {
|
beautifyHTML(str) {
|
||||||
// Pad all tags with linebreaks.
|
// Pad all tags with linebreaks.
|
||||||
let s = this.trimLines(str.replace(/(<(?!(\/)?a|span)([^>]+)>)/ig, '\n$1\n'), true);
|
let s = this.trimLines(str.replace(/(<(?!(\/)?a|span)([^>]+)>)/ig, '\n$1\n'), true);
|
||||||
|
@ -427,6 +441,12 @@ export default {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initRichtextEditor();
|
this.initRichtextEditor();
|
||||||
|
|
||||||
|
window.addEventListener('keydown', this.onPreviewShortcut);
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('keydown', this.onPreviewShortcut);
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
<form @submit.prevent="onSubmit">
|
<form @submit.prevent="onSubmit">
|
||||||
<div class="modal-card content template-modal-content" style="width: auto">
|
<div class="modal-card content template-modal-content" style="width: auto">
|
||||||
<header class="modal-card-head">
|
<header class="modal-card-head">
|
||||||
<b-button @click="previewTemplate" class="is-pulled-right" type="is-primary" icon-left="file-find-outline">
|
<b-button @click="onTogglePreview" class="is-pulled-right" type="is-primary" icon-left="file-find-outline">
|
||||||
{{ $t('templates.preview') }}
|
{{ $t('templates.preview') }} (F9)
|
||||||
</b-button>
|
</b-button>
|
||||||
|
|
||||||
<template v-if="isEditing">
|
<template v-if="isEditing">
|
||||||
|
@ -71,7 +71,7 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<campaign-preview v-if="previewItem" type="template" :title="previewItem.name" :template-type="previewItem.type"
|
<campaign-preview v-if="previewItem" type="template" :title="previewItem.name" :template-type="previewItem.type"
|
||||||
:body="form.body" @close="closePreview" />
|
:body="form.body" @close="onTogglePreview" />
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -110,12 +110,15 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
previewTemplate() {
|
onTogglePreview() {
|
||||||
this.previewItem = this.form;
|
this.previewItem = !this.previewItem ? this.form : null;
|
||||||
},
|
},
|
||||||
|
|
||||||
closePreview() {
|
onPreviewShortcut(e) {
|
||||||
this.previewItem = null;
|
if (e.key === 'F9') {
|
||||||
|
this.onTogglePreview();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
|
@ -170,6 +173,12 @@ export default Vue.extend({
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.focus.focus();
|
this.$refs.focus.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.addEventListener('keydown', this.onPreviewShortcut);
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('keydown', this.onPreviewShortcut);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Reference in a new issue