Hi,
You can try this:
<template>
<div>
<smart-editor v-model="editorContent"></smart-editor>
<button @click="validateEditor">Submit</button>
<p v-if="errorMessage" style="color:red">{{ errorMessage }}</p>
</div>
</template>
<script>
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";
export default {
data() {
return {
editorContent: '',
errorMessage: ''
};
},
methods: {
validateEditor() {
// Apply custom validation rules
if (!this.editorContent || this.editorContent.trim() === '') {
this.errorMessage = 'Editor content cannot be empty.';
return;
}
// Example: Minimum length rule
const textOnly = this.editorContent.replace(/<[^>]+>/g, '').trim();
if (textOnly.length < 20) {
this.errorMessage = 'Content must be at least 20 characters long.';
return;
}
// Example: Prohibited word
if (/forbiddenword/i.test(textOnly)) {
this.errorMessage = 'Content contains forbidden words.';
return;
}
this.errorMessage = '';
alert('Validation passed! Submitting data...');
}
}
};
</script>
Best Regards,
Markov
Smart UI Team
https://www.htmlelements.com/
.
