0

Ya estuve revisando las respuestas de la pregunta Get input field value from dialog box in TinyMCE pero no encontre solución a lo que busco.

Estoy haciendo un plugin para TinyMce donde se selecciona un Type y se ingresa un Id para poder crear un elemento html en el content del editor. Sin embargo no estoy pudiendo obtener el valor de estos campos.

TinyMceCustomPlugin

Mi código es el siguiente:


var _dialogForm = {
    title: 'Exercise',
    body: [{
        type: 'form',
        layout: 'flex',
        direction: 'column',
        padding: 0,
        items: [
            {
                type: 'listbox',
                name: 'type',
                label: 'Type',
                value: 'internal',
                values: [
                    {
                        text: 'Internal exercise',
                        value: 'internal',
                    },
                    {
                        text: 'External exercise',
                        value: 'external',
                    },
                ]
            },
            {
                type: 'textbox',
                name: 'id',
                label: 'Id',
                value: 'Internal'
            },
        ]
    }],
    buttons: [
        {
            text: 'Insert',
            classes: 'btn primary',
            onclick: function (event) {

                // Asi pienso que se deberian de obtener

                const id = event.data.id;
                const type = event.data.type;

                console.log('id', event.data.id);
                console.log('type', event.data.type);

                editor.insertContent(`&nbsp;<exercise id="${type}" type="${type}" contenteditable="false">${_('Internal exercise')}</exercise>`);

                top.tinymce.activeEditor.windowManager.close();
            }
        },
        {
            text: 'Cancel',
            onclick: 'close',
        }
    ]
}

editor.windowManager.open(_dialogForm);

¿Como puedo obtener el valor de los campos?

{
    text: 'Insert',
    classes: 'btn primary',
    onclick: function (event) {

        // Asi pienso que se deberian de obtener

        const id = event.data.id;
        const type = event.data.type;

        console.log('id', event.data.id);
        console.log('type', event.data.type);

        editor.insertContent(`&nbsp;<exercise id="${type}" type="${type}" contenteditable="false">${_('Internal exercise')}</exercise>`);

        top.tinymce.activeEditor.windowManager.close();
    }
},

1 respuesta 1

0

Ya encontré la solución para obtener los valores ingresados en el customDialog, estos se obtienen como parametro en la función onSubmit.

onSubmit: function(e) {
    console.log(`type: ${e.data.type}; id: ${e.data.id}`);
    editor.insertContent(`&nbsp;<p>Type: ${e.data.type}</p>`);
    editor.insertContent(`&nbsp;<p>Id: ${e.data.id}</p>`);
}

Este es el código:

editor.windowManager.open({
    title: 'Exercise',
    body: [{
        type: 'form',
        layout: 'flex',
        direction: 'column',
        padding: 0,
        items: [
            {
                type: 'listbox',
                name: 'type',
                label: 'Type',
                value: 'internal',
                values: [
                    {
                        text: 'Internal exercise',
                        value: 'internal',
                    },
                    {
                        text: 'External exercise',
                        value: 'external',
                    },
                ]
            },
            {
                type: 'textbox',
                name: 'id',
                label: 'Id',
                value: 'Internal'
            },
        ]
    }],
    buttons: [
        {
            text: 'Insert',
            classes: 'btn primary',
            onclick: 'submit',
        },
        {
            text: 'Cancel',
            onclick: 'close',
        }
    ],
    onSubmit: function(e) {
    console.log(`type: ${e.data.type}; id: ${e.data.id}`);
    editor.insertContent(`&nbsp;<p>Type: ${e.data.type}</p>`);
    editor.insertContent(`&nbsp;<p>Id: ${e.data.id}</p>`);
    }
});

Demo: https://codepen.io/anayarojo/pen/RdXozJ?editors=0010

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.