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
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>
|