FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
ameliabooking
/
assets
/
views
/
backend
/
parts
Edit File: ContentBlock.vue
<template> <div style="margin-bottom: 30px;"> <div v-if="hasTranslation"> <el-row type="flex" align="middle" :gutter="24" style="margin-bottom: 5px;"> <el-col :span="24"> {{ label + ':' }} </el-col> </el-row> <el-row type="flex" align="middle"> <el-col :span="12"> <el-button-group style="margin-bottom: 5px;"> <el-button size="mini" :type="isTextMode ? 'default' : 'primary'" @click="textModeChanged">{{ $root.labels.text_mode }}</el-button> <el-button size="mini" :type="isTextMode ? 'primary' : 'default'" @click="textModeChanged">{{ $root.labels.html_mode }}</el-button> </el-button-group> </el-col> <el-col :span="12"> <div class="am-service-translate am-event-translate" @click="showDialogTranslate" style="cursor: pointer;line-height: inherit"> <img class="am-dialog-translate-svg" width="16px" :src="$root.getUrl+'public/img/translate.svg'"> {{ $root.labels.translate }} </div> </el-col> </el-row> </div> <div v-else style="margin-bottom: 5px;"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="12"> {{ label + ':' }} </el-col> <el-col :span="12" class="align-right" v-if="hasQuill"> <el-button-group> <el-button size="mini" :type="isTextMode ? 'default' : 'primary'" @click="textModeChanged">{{ $root.labels.text_mode }}</el-button> <el-button size="mini" :type="isTextMode ? 'primary' : 'default'" @click="textModeChanged">{{ $root.labels.html_mode }}</el-button> </el-button-group> </el-col> </el-row> </div> <el-row> <el-col> <el-alert type="warning" show-icon title="" :description="$root.labels.content_mode_tooltip" :closable="false" style="margin-bottom: 10px" > </el-alert> </el-col> </el-row> <el-input v-if="isTextMode" type="textarea" :autosize="{minRows: 4, maxRows: 6}" placeholder="" v-model="textValue" @input="changedContentText" > </el-input> <quill-editor v-else v-model="entity[htmlProperty]" :options="{ modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote'], [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}], [{'indent': '-1'}, {'indent': '+1'}], [{'direction': 'rtl'}], [{'color': []}, {'background': []}], [{'size': ['small', false, 'large', 'huge']}], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'font': []}], [{'align': []}], ['clean'], allowImage ? ['link', 'image'] : ['link'] ] } }" @change="changedContentQuill" @ready="readyQuill" > </quill-editor> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import quillMixin from '../../../js/backend/mixins/quillMixin' export default { mixins: [quillMixin], props: { textModeProp: null, allowImage: false, hasTranslation: true, hasQuill: true, label: '', entity: null, textProperty: '', htmlProperty: '' }, data () { return { textValue: '', isTextMode: false } }, mounted () { if (!(this.textProperty in this.entity) || this.entity[this.textProperty] === null) { this.entity[this.textProperty] = '' } if (!(this.htmlProperty in this.entity) || this.entity[this.htmlProperty] === null) { this.entity[this.htmlProperty] = '' } this.$nextTick(() => { this.isTextMode = this.textModeProp this.textValue = this.entity[this.textProperty] this.entity[this.htmlProperty] = this.entity[this.textProperty] if (this.entity[this.textProperty].startsWith('<!-- Content -->')) { this.isTextMode = false } if (this.isTextMode) { this.entity[this.textProperty] = this.entity[this.textProperty].replace('<!-- Content -->', '') } }) }, methods: { readyQuill () { if (this.textProperty in this.entity && this.entity[this.textProperty]) { this.entity[this.textProperty] = this.entity[this.textProperty].replace('<p><br></p><ul>', '<ul>') this.entity[this.textProperty] = this.entity[this.textProperty].replace('<p><br></p><ol>', '<ol>') } }, changedContentQuill (object) { this.entity[this.textProperty] = '<!-- Content -->' + this.entity[this.htmlProperty].replace('<!-- Content -->', '') this.$emit('changeQuillContent', object) }, changedContentText () { this.entity[this.textProperty] = this.process( this.textValue.replace('<!-- Content -->', '').replace(/(\r\n|\n|\r)/gm, '') ) this.entity[this.htmlProperty] = this.entity[this.textProperty] }, showDialogTranslate () { this.$emit('showDialogTranslate') }, textModeChanged () { this.isTextMode = !this.isTextMode if (this.isTextMode) { this.entity[this.textProperty] = this.process( this.entity[this.htmlProperty].replace('<!-- Content -->', '').replace(/(\r\n|\n|\r)/gm, '') ) } else { this.entity[this.textProperty] = '<!-- Content -->' + this.entity[this.textProperty] this.entity[this.htmlProperty] = this.entity[this.textProperty] } this.textValue = this.entity[this.textProperty] } }, components: { quillEditor } } </script>
Save
Back