pui9-components 1.16.4

package/src/components/PuiRichTextEditor.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="richtexteditor-container ml-1 mr-1">
+		<div v-if="hasLabel()">
+			<label>{{ this.label }}</label>
+			<label class="richtexteditor-label-required" v-if="required">*</label>
+		</div>
+		<tinymce-editor v-bind:id="id" v-model="data" :plugins="plugins" :toolbar="toolbar" v-bind:ref="id" @onBlur="checkContent"></tinymce-editor>
+		<v-text-field v-if="required" v-model="data" :rules="getRules" style="display: none"></v-text-field>
+		<div class="richtexteditor-error-message">
+			<label class="richtexteditor-label-error">{{ $t('pui9.error.field_required') }}</label>
+		</div>
+	</div>
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue';
+
+export default {
+	name: 'PuiRichTextEditor',
+	components: {
+		'tinymce-editor': Editor
+	},
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		value: {
+			type: String,
+			default: ''
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		validationErrors: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		externalValue() {
+			return this.value;
+		},
+		getRules() {
+			const rules = [];
+			if (this.required) {
+				rules.push((data) => !!data || 'error');
+			}
+			return rules;
+		}
+	},
+	data() {
+		return {
+			plugins: [
+				'advlist autolink lists link image charmap preview hr anchor pagebreak',
+				'searchreplace wordcount visualblocks visualchars code fullscreen',
+				'insertdatetime nonbreaking save table directionality',
+				'emoticons template paste textpattern imagetools codesample toc'
+			],
+			toolbar: [
+				'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
+			],
+			data: this.value
+		};
+	},
+	mounted() {
+		this.loadData();
+	},
+	watch: {
+		data() {
+			this.checkContent();
+			this.$emit('input', this.data);
+		},
+		externalValue(newValue) {
+			this.data = newValue;
+		},
+		validationErrors() {
+			this.checkContent();
+		}
+	},
+	methods: {
+		hasLabel() {
+			return this.label !== undefined;
+		},
+		createEditor() {
+			Editor.init({
+				selector: '#editor',
+				plugins: 'image',
+				toolbar: ['undo redo | styleselect | bold italic | link image', 'alignleft aligncenter alignright']
+			});
+		},
+		loadData() {
+			this.data = this.$refs[this.id].value;
+			this.$emit('input', this.data);
+		},
+		checkContent() {
+			var errorMsg = this.$el.getElementsByClassName('richtexteditor-error-message');
+			var newsContainer = this.$el.getElementsByClassName('tox-tinymce');
+
+			if (this.required) {
+				if (this.data === null || this.data === '') {
+					errorMsg[0].style.display = 'block';
+					newsContainer[0].classList.add('richtexteditor-error-tinymce');
+				} else {
+					errorMsg[0].style.display = 'none';
+					newsContainer[0].classList.remove('richtexteditor-error-tinymce');
+				}
+			}
+		}
+	}
+};
+</script>