pui9-components 1.17.3 → 2.0.7

package/src/components/PuiRichTextEditor.vue

@@ -4,7 +4,7 @@
 			<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>
+		<textarea v-model="data" :id="id" :ref="id"></textarea>
 		<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>
@@ -13,13 +13,12 @@
 </template>
 
 <script>
-import Editor from '@tinymce/tinymce-vue';
+import { Jodit } from 'jodit';
+import 'jodit/build/jodit.min.css';
 
 export default {
 	name: 'PuiRichTextEditor',
-	components: {
-		'tinymce-editor': Editor
-	},
+	components: {},
 	props: {
 		id: {
 			type: String,
@@ -40,8 +39,17 @@ export default {
 		validationErrors: {
 			type: Boolean,
 			default: false
+		},
+		height: {
+			type: Number,
+			default: 480
 		}
 	},
+	data() {
+		return {
+			data: this.value
+		};
+	},
 	computed: {
 		externalValue() {
 			return this.value;
@@ -54,24 +62,12 @@ export default {
 			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: {
+		value(v) {
+			this.data = v;
+			this.editor.value = v;
+			console.log(11)
+		},
 		data() {
 			this.checkContent();
 			this.$emit('input', this.data);
@@ -83,35 +79,38 @@ export default {
 			this.checkContent();
 		}
 	},
+	mounted() {
+		//Jodit.plugins.add(plugin.name, plugin.callback);
+		this.editor = new Jodit(this.$refs[this.id], {
+			// width: 800,
+			height: this.height,
+			// language: 'es' // tooltips
+		});
+		this.editor.value = this.data;
+		this.editor.events.on('change', newValue => this.$emit('input', newValue))
+	},
+	beforeDestroy() {
+		this.editor.destruct();
+	},
 	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');
+            var errorMsg = this.$el.getElementsByClassName('richtexteditor-error-message');
 
-			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');
-				}
+			if(this.data == '<p><br></p>') {
+				this.data = null;
 			}
-		}
+
+            if (this.required) {
+                if (this.data === null || this.data === '') {
+                    errorMsg[0].style.display = 'block';
+                } else {
+                    errorMsg[0].style.display = 'none';
+                }
+            }
+        }
 	}
 };
 </script>