Trigger TinyMCE on modal open

lwilliams-heli

How can I trigger tinyMCE to initialise upon opening a model in the admin?

rahul

You can make a component for body of modal. So, when this component called, initialise tinyMCE in its created or mounted method.

Like , You can see, we have a model, which have component -

<modal id="downloadDataGrid" :is-open="modalIds.downloadDataGrid">
        <h3 slot="header">{{ __('admin::app.export.download') }}</h3>
        <div slot="body">
            <export-form></export-form>
        </div>
    </modal>

When this <export-form></export-form> component gets called, we initialise TinyMCE.

<script>
    Vue.component('export-form', {
        template: '#export-form-template',

        mounted() {
            tinymce.init({
                selector: 'textarea#description',
                height: 200,
                width: "100%",
                plugins: 'image imagetools media wordcount save fullscreen code',
                toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code',
                image_advtab: true
            });
        },

        methods: {
            onSubmit: function(e) {
                e.target.submit();

                this.$root.$set(this.$root.modalIds, 'downloadDataGrid', false);
            }
        }
    });
</script>

Thanks

Recent Topics

Trigger TinyMCE on modal open