mamweb/vue_frontend/src/components/TextNode.vue

<template>
	<div v-if="loading" class="loading">
	<p>Loading...</p>
	</div>
	<div v-else class="textnode">
		<!--pre>TextNode {{item}} {{typeof(item)}}</pre-->
		<template v-if="editorShow">

			<div v-if="plainEditShow">
				<textarea id="textarea" v-model="currentText" rows="8" cols="50"></textarea>
				<br>
				<button v-on:click="plainEditShow=!plainEditShow">Editovat v editoru</button>
			</div>

			<div v-else>
				<component v-bind:is="editorComponent" :editor="editor" v-model="currentText" :config="editorConfig"></component>
				<button v-on:click="plainEditShow=!plainEditShow">Editovat HTML</button>
			</div>
			<button v-on:click="saveText">Uložit</button>
			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>

		</template>

		<template v-else v-bind:class="changedObject">
			<p v-html="currentText"></p>
			<button v-if="editorMode" v-on:click="editorShow=!editorShow">Upravit</button>
		</template>
	</div>
</template>

<script>
import axios from 'axios'

//import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import ClassicEditor from 'ckeditor5-build-classic-simple-upload-adapter-image-resize';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
	name: 'TextNode',
	data: () => ({
		loading: false,
		editor: ClassicEditor,
		editorData: '<p>Content of the editor.</p>',
		editorConfig: {
			extraPlugins: ['SimpleUploadAdapter'],
			simpleUpload: {
				uploadUrl: "/temp/image_upload/",
				headers: {},
				withCredentials: true
			}
			// The configuration of the editor.
		},
		editorShow: false,
		plainEditShow: false,
		editorComponent: CKEditor.component,
		currentText: "",// this.item.node.text.na_web,
		originalText: "",// this.item.node.text.na_web,
	}),
	computed: {
		changedObject: function () {
			//console.log(this.currentText);
			//console.log(this.originalText);
			return {
				changed: this.currentText !== this.originalText,
				}
			},
		textId: function () {
			console.log(this.create);
			console.log(this.node.text.id);
			if (this.create){
				return null;
			}
			return this.node.text.id;

		}
	},
	props: {
		item: Object,
		editorShow: Boolean,
		editorMode: Boolean,
		create: Boolean,
		where: String,
		refnode: Object
	},
	mounted: function() {
		//console.log("mounted");
		this.editorConfig.simpleUpload.headers['X-CSRFToken'] = this.getCookie('csrftoken');
		axios.defaults.headers.common['X-CSRFToken'] = this.getCookie('csrftoken');
		if (this.create){
			this.currentText = "";
			this.originalText = "";
			this.editorShow = true;
		} else {
			this.currentText = this.item.node.text.na_web;
			this.originalText = this.item.node.text.na_web;
			this.editorConfig.simpleUpload.headers.textId = this.item.node.text.id;

		}
		//this.getText();
	},
	methods: {
		getCookie: function (name){
			var cookieValue = null;
			if (document.cookie && document.cookie != '') {
				var cookies = document.cookie.split(';');
				for (var i = 0; i < cookies.length; i++) {
					var cookie = cookies[i].trim();
					// Does this cookie string begin with the name we want?

					if (cookie.substring(0, name.length + 1) == (name + '=')) {
						cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
						break;
					}
				}
			}
			return cookieValue;
		},
		getText: function() {
			this.loading = true;
			console.log(this.item);
			console.log(this.item.node.text);
			axios.get('/treenode/text/'+this.item.node.text)
			.then((response) => {
				this.text = response.data.na_web;
				this.loading = false;
			})
			.catch((err) => {
				this.loading = false;
				console.log(err);
				})
		},
		
		saveText: function() {
			console.log("Saving text");
			console.log(this.currentText);
			if (this.create){
				console.log(this.refnode);
				console.log(this.where);
				axios.post('/api/textnode/',{
					'text': { 'na_web': this.currentText},
					'refnode': this.refnode.id,
					'where': this.where
				}).then(response => {
					this.originalText = response.data.text.na_web;
					this.loading = false;
					this.$root.$emit('updateData',"textNode create update");
					})
				.catch(e => {
					this.errors.push(e)
				});
			} else {
				axios.put('/api/textnode/'+this.item.node.id+'/',{
					'text': { 'na_web': this.currentText},
					'id': this.item.node.id
				}).then(response => {
					this.originalText = response.data.text.na_web;
				})
				.catch(e => {
					this.errors.push(e)
				});
				
			}
			this.editorShow = false;
		},
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.changed {
	background-color: 'yellow';
}
</style>