158 lines
4.3 KiB
Vue
158 lines
4.3 KiB
Vue
<template>
|
|
<div class="row m-0 p-0 align-items-center">
|
|
<div class="col-sm-12 col-md-6 p-0">
|
|
<span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
|
|
><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_textarea') }}</span>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 p-0 text-end">
|
|
<a href="#" @click.prevent="openModal" title="Edytuj" class="text-primary me-2"
|
|
><i class="material-icons-outlined">create</i></a
|
|
>
|
|
<b-modal
|
|
no-enforce-focus
|
|
class_other="modal-xl"
|
|
v-model="modalBox"
|
|
:title="t('pagebuilder.widget_textarea')"
|
|
v-on:hide="onCloseModal"
|
|
>
|
|
<div style="min-height: 400px">
|
|
<div class="mb-4" v-if="delayModal">
|
|
<div class="form-group">
|
|
<editor
|
|
api-key="no-api-key"
|
|
rows="12"
|
|
class="form-control"
|
|
v-model="text"
|
|
:init="{ ...vtinymce, language: locale }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
|
|
{{ t('pagebuilder.save') }}
|
|
</button>
|
|
</div>
|
|
</b-modal>
|
|
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
|
|
><i class="material-icons-outlined">delete</i></a
|
|
>
|
|
</div>
|
|
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import MagicoModal from './../MagicoModal.vue'
|
|
import tinymceConfig from '../tinymce/config.js'
|
|
|
|
import Editor from '@tinymce/tinymce-vue'
|
|
import { nextTick } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
export default {
|
|
emits: ['update:modelValue'],
|
|
components: {
|
|
'b-modal': MagicoModal,
|
|
|
|
editor: Editor // <- To jest TINYMCE
|
|
},
|
|
props: {
|
|
modelValue: Object
|
|
},
|
|
setup() {
|
|
const { t, locale } = useI18n()
|
|
return { t, locale }
|
|
},
|
|
mounted: function () {
|
|
let vm = this
|
|
this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
|
|
this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
|
|
if (this.modelValue.open) {
|
|
this.modalBox = true
|
|
setTimeout(function () {
|
|
vm.delayModal = true
|
|
}, 200)
|
|
}
|
|
console.log('mounted textarea')
|
|
this.$emit('update:modelValue', this.modelValue)
|
|
},
|
|
data: function () {
|
|
return {
|
|
langs: {
|
|
saveclose: 'Zapisz',
|
|
label: 'Pole tekstowe',
|
|
close: 'Zamknij'
|
|
},
|
|
height: window.innerHeight - window.innerHeight / 4,
|
|
modalBox: false,
|
|
delayModal: false,
|
|
editor: null,
|
|
text: '',
|
|
name: 'core_section_textarea',
|
|
vtinymce: Object.assign(tinymceConfig, {
|
|
setup: function (e) {
|
|
console.log(e)
|
|
},
|
|
file_picker_callback: (callback) => {
|
|
if (this.$filechooser) {
|
|
this.$filechooser.open({
|
|
chooseCallback: function (ev) {
|
|
console.log('filePathChosed', ev)
|
|
callback(ev.publicUrl)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
modalBox: function () {
|
|
if (this.modalBox) {
|
|
document.addEventListener('focusin', (e) => {
|
|
if (
|
|
e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
|
|
) {
|
|
e.stopImmediatePropagation()
|
|
}
|
|
})
|
|
}
|
|
console.log('focus')
|
|
}
|
|
},
|
|
computed: {
|
|
ctext: function () {
|
|
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
|
|
}
|
|
},
|
|
methods: {
|
|
openModal: function () {
|
|
let vm = this
|
|
this.modalBox = true
|
|
setTimeout(function () {
|
|
vm.delayModal = true
|
|
}, 200)
|
|
// nextTick(() => {
|
|
// vm.delayModal = true
|
|
// })
|
|
},
|
|
removeItem: function () {
|
|
this.$emit('itemRemoved', this.modelValue)
|
|
},
|
|
onCloseModal: function () {
|
|
setTimeout(
|
|
function () {
|
|
this.modalBox = false
|
|
this.delayModal = false
|
|
this.$emit('update:modelValue', {
|
|
name: this.name,
|
|
text: this.text
|
|
})
|
|
}.bind(this),
|
|
200
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|