99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isLoading"
|
|
class="box p-3"
|
|
>
|
|
<tab-wrapper @tabActivated="tabActivated">
|
|
<tab-content title="Visual Editor">
|
|
<div class="editor mt-2">
|
|
<VueEditor
|
|
v-model="page.content"
|
|
:editor-options="editorOptions"
|
|
:disabled="isVueEditorDisabled"
|
|
/>
|
|
</div>
|
|
</tab-content>
|
|
<tab-content title="Raw Content">
|
|
<div>
|
|
<textarea
|
|
v-model="page.content"
|
|
class="p-fluid pages-editor-raw"
|
|
/>
|
|
</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
|
|
// https://github.com/davidroyer/vue2-editor => docs apply for version 3, too
|
|
import { VueEditor } from 'vue3-editor'
|
|
|
|
import hljs from 'highlightjs'
|
|
import 'highlightjs/styles/dracula.css'
|
|
|
|
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,
|
|
isVueEditorDisabled: false,
|
|
editorOptions: {
|
|
modules: {
|
|
syntax: {
|
|
highlight: (text) => hljs.highlightAuto(text).value
|
|
}
|
|
},
|
|
theme: 'snow'
|
|
}
|
|
}),
|
|
beforeMount() {
|
|
const { slug } = this.$route.params
|
|
|
|
axios
|
|
.get(`/api/pages?slug=${slug}`)
|
|
.then((response) => {
|
|
[this.page] = response.data['hydra:member']
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
methods: {
|
|
saveContent() {
|
|
axios
|
|
.put(`/api/pages/${this.page.id}`, this.page)
|
|
.then(() => {
|
|
this.$router.push({
|
|
name: 'Pages',
|
|
params: { slug: this.page.slug }
|
|
})
|
|
})
|
|
},
|
|
tabActivated(name) {
|
|
this.isVueEditorDisabled = name === 'Raw Content'
|
|
}
|
|
}
|
|
}
|
|
</script>
|