Recent Topics

Trigger TinyMCE on modal open



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



  • Hi @lwilliams-heli

    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


Log in to reply