How to make TinyMCE play nice with Bootstrap’s form validation example starter JavaScript when replacing textarea elements.

<script>
tinymce.init({
    selector: '.wysiwyg',
    setup: (editor) => {
        editor.on('blur', () => {
            editor.getElement().value = editor.getContent({ format: 'html' })
        })
    },
})
</script>

That setup was all we needed for .invalid-feedback elements to toggle during form submission without modifying the existing form validation script.

Bonus: Adjust the TinyMCE editor’s border color to correspond with .was-validated 😉

<style>
.wysiwyg.is-invalid + .tox, .was-validated .wysiwyg:invalid + .tox {
    border-color: var(--bs-form-invalid-color);
}

.wysiwyg.is-valid + .tox, .was-validated .wysiwyg:valid + .tox {
    border-color: var(--bs-form-valid-color);
}
</style>

Cheers 🍻