Add a fullscreen option to the campaign richtext editor
This commit is contained in:
parent
378e8145fe
commit
4703d78b39
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue