Spookie/assets/js/components/pages/edit.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>