Files
assets
images
js
components
blog
pages
PagesIndex.vue
edit.vue
projects
quotes
tabs
users
AppLink.vue
HandleLogout.vue
LoginForm.vue
NotFound.vue
TheAbout.vue
TheFooter.vue
TheNavbar.vue
TheSidebar.vue
composables
router
stores
App.vue
index.js
styles
bin
config
migrations
public
src
templates
tools
translations
.env
.eslintrc
.gitignore
.php-cs-fixer.cache
.php-cs-fixer.php
LICENSE
README.md
TODO
bootstrap.js
composer.json
composer.lock
controllers.json
docker-compose.override.yml
docker-compose.yml
package.json
rector.php
symfony.lock
webpack.config.js
yarn.lock
Spookie/assets/js/components/pages/edit.vue
2022-05-23 16:25:55 +02:00

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>