78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isLoading"
|
|
class="box p-3"
|
|
>
|
|
<tab-wrapper>
|
|
<tab-content title="Visual Editor">
|
|
<div class="editor mt-2">
|
|
<!-- *** disbaled = true? -->
|
|
<VueEditor v-model="page.content"/>
|
|
</div>
|
|
</tab-content>
|
|
<tab-content title="Raw Content">
|
|
<div>
|
|
<textarea
|
|
v-model="page.content"
|
|
class="p-fluid"
|
|
/>
|
|
</div>
|
|
</tab-content>
|
|
</tab-wrapper>
|
|
<button
|
|
class="btn btn-primary mt-3 mb-2"
|
|
@click="saveContent"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div v-else>
|
|
<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
|
|
<span class="sr-only">Loading …</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
// Basic Use - Covers most scenarios
|
|
import { VueEditor } from 'vue3-editor'
|
|
import TabWrapper from '@/components/tabs/TabWrapper'
|
|
import TabContent from '@/components/tabs/TabContent'
|
|
|
|
export default {
|
|
name: 'PagesEdit',
|
|
components: {
|
|
VueEditor,
|
|
TabWrapper,
|
|
TabContent
|
|
},
|
|
data: () => ({
|
|
page: null,
|
|
isLoading: true
|
|
}),
|
|
beforeMount() {
|
|
const { slug } = this.$route.params
|
|
console.log(`slug: ${slug}`)
|
|
|
|
axios
|
|
.get(`/api/pages?slug=${slug}`)
|
|
.then((response) => {
|
|
[this.page] = response.data['hydra:member']
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
methods: {
|
|
saveContent() {
|
|
console.log(this.page)
|
|
axios
|
|
.put(`/api/pages/${this.page.id}`, this.page)
|
|
.then((response) => {
|
|
console.log(`resp:${response}`)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|