Add a fullscreen option to the campaign richtext editor

This commit is contained in:
Kailash Nadh 2020-08-01 20:19:03 +05:30
parent 378e8145fe
commit 4703d78b39
3 changed files with 43 additions and 6 deletions

View File

@ -166,7 +166,7 @@ section {
}
}
/* HTML code editor */
/* WYSIWYG / HTML code editor */
.html-editor {
position: relative;
width: 100%;
@ -175,6 +175,23 @@ section {
border: 1px solid $grey-lighter;
border-radius: 2px;
}
.quill-editor {
background: #fff;
&.fullscreen {
position: fixed;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
z-index: 100;
}
.ql-fullscreen:after {
content: "";
font-weight: 600;
font-size: 1.2rem;
line-height: 0.95rem;
}
}
/* Table colors and padding */
.main table {

View File

@ -22,6 +22,7 @@
<!-- wsywig //-->
<quill-editor
:class="{'fullscreen': isEditorFullscreen}"
v-if="form.format === 'richtext'"
v-model="form.body"
ref="quill"
@ -84,6 +85,7 @@ export default {
return {
isPreviewing: false,
isMediaVisible: false,
isEditorFullscreen: false,
form: {
body: '',
format: this.contentType,
@ -104,6 +106,16 @@ export default {
options: {
placeholder: 'Content here',
modules: {
keyboard: {
bindings: {
esc: {
key: 27,
handler: () => {
this.toggleFullscreen(true);
},
},
},
},
toolbar: {
container: [
[{ header: [1, 2, 3, false] }],
@ -122,11 +134,12 @@ export default {
{ align: 'justify' },
],
['link', 'image'],
['clean', 'font'],
['clean', 'fullscreen'],
],
handlers: {
image: this.toggleMedia,
fullscreen: () => this.toggleFullscreen(false),
},
},
},
@ -198,6 +211,15 @@ export default {
this.isMediaVisible = !this.isMediaVisible;
},
toggleFullscreen(onlyMinimize) {
if (onlyMinimize) {
if (!this.isEditorFullscreen) {
return;
}
}
this.isEditorFullscreen = !this.isEditorFullscreen;
},
onMediaSelect(m) {
this.$refs.quill.quill.insertEmbed(this.lastSel.index || 0, 'image', m.url);
},

View File

@ -15,10 +15,8 @@
<form @submit.prevent="getCampaigns">
<b-field grouped>
<b-input v-model="queryParams.query"
placeholder="Name or subject" icon="magnify" ref="query"
:disabled="isSearchAdvanced"></b-input>
<b-button native-type="submit" type="is-primary" icon-left="magnify"
:disabled="isSearchAdvanced"></b-button>
placeholder="Name or subject" icon="magnify" ref="query"></b-input>
<b-button native-type="submit" type="is-primary" icon-left="magnify"></b-button>
</b-field>
</form>