Known Issues

Unresponsive editor in Bootstrap modals

There is an issue with the TinyMCE editor not working correctly in BootstrapVue modal windows. It may work correctly the first time, but when you close the modal and re-open it the editor is either frozen or 'unresponsive'.

The workaround is to force the component to be re-rendered using v-if and $nextTick():

<script>
    export default {
        data() {
            return {
                //...
                showWysiwygEditor: false,
            };
        },
        watch: {
            async visible() {
                // https://github.com/tinymce/tinymce-vue/issues/131
                await $nextTick()
                this.showWysiwygEditor = this.isOpen;
            },
        },
    }
</script>

<template>
    <FieldWysiwygBasic
        v-if="showWysiwygEditor"
        v-model="form.content_html"
    />
</template>

If you try add/modify a link by clicking the link icon in the WYSIWYG toolbar, you won't be able to click on any of the fields to type something:

Demonstration of the modal focus bug

The workaround is to stop prevent the focusin event propagating:

export default {
    mounted() {
        document.addEventListener('focusin', this.unblockFocus, false);
    },
    beforeDestroy() {
        document.removeEventListener('focusin', this.unblockFocus, false);
    },
    methods: {
        //...
        unblockFocus(event) {
            // Prevent Bootstrap dialog from blocking focusin
            // https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
            if (event.originalTarget.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root')) {
                event.stopImmediatePropagation();
            }
        }
    },
}