153 lines
3.1 KiB
Vue
153 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isLoading"
|
|
class="box p-3"
|
|
>
|
|
<tabs-group @tabActivated="tabActivated">
|
|
<tab-content title="Visual Editor">
|
|
<div class="editor mt-2">
|
|
<QuillEditor
|
|
ref="editor"
|
|
theme="snow"
|
|
:content="JSON.parse(page.content)"
|
|
:options="editorOptions"
|
|
:disabled="isVueEditorDisabled"
|
|
/>
|
|
<button
|
|
class="btn btn-primary mt-3 mb-2"
|
|
@click="saveContent"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</tab-content>
|
|
<tab-content title="Preview">
|
|
<div class="preview mt-2 no-overflow">
|
|
<QuillEditor
|
|
ref="preview"
|
|
theme="bubble"
|
|
class="no-overflow"
|
|
:content="JSON.parse(page.content)"
|
|
:options="editorOptions"
|
|
:disabled="true"
|
|
/>
|
|
</div>
|
|
<!--
|
|
<div>
|
|
<textarea
|
|
v-model="page.content"
|
|
class="p-fluid pages-editor-raw"
|
|
/>
|
|
</div>
|
|
-->
|
|
</tab-content>
|
|
<tab-content title="Delta">
|
|
<div class="editor mt-2">
|
|
<textarea
|
|
ref="delta"
|
|
v-model="page.content"
|
|
class="p-fluid pages-editor-raw"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="btn btn-primary mt-3 mb-2"
|
|
@click="saveDelta"
|
|
>
|
|
Save
|
|
</button>
|
|
</tab-content>
|
|
</tabs-group>
|
|
</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'
|
|
|
|
import 'highlight.js/styles/tomorrow-night-blue.css'
|
|
import hljs from 'highlight.js'
|
|
|
|
//import Quill from 'quill'
|
|
import { Quill, QuillEditor } from '@vueup/vue-quill'
|
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
|
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
|
|
|
|
import htmlEditButton from 'quill-html-edit-button'
|
|
|
|
import TabsGroup from '@/components/tabs/TabsGroup'
|
|
import TabContent from '@/components/tabs/TabContent'
|
|
|
|
Quill
|
|
// .register('modules/syntax', syntax, false)
|
|
.register('modules/htmlEditButton', htmlEditButton)
|
|
|
|
hljs.configure({
|
|
languages: ['javascript', 'php', 'swift']
|
|
})
|
|
|
|
export default {
|
|
name: 'PagesEdit',
|
|
components: {
|
|
QuillEditor,
|
|
TabsGroup,
|
|
TabContent
|
|
},
|
|
data: () => ({
|
|
page: null,
|
|
isLoading: true,
|
|
isVueEditorDisabled: false,
|
|
editorOptions: {
|
|
modules: {
|
|
htmlEditButton: {
|
|
debug: true
|
|
},
|
|
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() {
|
|
this.page.content = JSON.stringify(this.$refs.editor.getContents())
|
|
axios
|
|
.put(`/api/pages/${this.page.id}`, this.page)
|
|
.then(() => {
|
|
//this.$router.push({
|
|
// name: 'Pages',
|
|
// params: { slug: this.page.slug }
|
|
//})
|
|
})
|
|
},
|
|
saveDelta() {
|
|
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>
|