1

So I need to add additional fields in the wordpress tiny mce pop up

My current Code

(function () {
tinymce.PluginManager.add('aptmce_btn', function (editor, url) {
    editor.addButton('aptmce_btn', {
        text: 'Add popup',
        icon: false,
        onclick: function () {
            editor.windowManager.open({
                title: 'Enter Your PopUp Contents',
                body: [
                    {
                        type: 'textbox',
                        name: 'textboxName',
                        label: 'Title',
                        value: ''

                    },

                    {
                        type: 'textbox',
                        name: 'multilineName',
                        label: 'Content',
                        value: '',
                        multiline: true,
                        minWidth: 300,
                        minHeight: 100
                    },


                ],
                onsubmit: function (e) {
                    editor.insertContent('[show_popup title="' + e.data.textboxName + '" content="' + e.data.multilineName + '"]');
                  }
               });
           }
       });
   });
})();

I can a text box and a textarea. But I have having issues adding the following

  • A drop down
  • A checkbox
  • A radio box

I have also had a look at this link but nothing is coming up

Could one of you let me know how can I add the desired fields?

Thanks

1

See here, I think it's enough for making any kind of TinyMCE Editor button with extended options like dropdown etc

https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

Anyway if we came down to dropdown, checkbox and radio button on Popup, here is a demonstration.

(function () {
tinymce.PluginManager.add('aptmce_btn', function (editor, url) {
    editor.addButton('aptmce_btn', {
        text: 'Add popup',
        icon: false,
        onclick: function () {
            editor.windowManager.open({
                title: 'Enter Your PopUp Contents',
                body: [
                    {
                        type: 'textbox',
                        name: 'textboxName',
                        label: 'Title',
                        value: ''

                    },
                    {
                        type: 'textbox',
                        name: 'multilineName',
                        label: 'Content',
                        value: '',
                        multiline: true,
                        minWidth: 300,
                        minHeight: 100
                    },
                    {
                        type: 'listbox', 
                        name: 'timeformat', 
                        label: 'Time Format', 
                        'values': [
                            {text: 'AM', value: 'am'},
                            {text: 'PM', value: 'pm'}
                        ]
                    },
                    {
                        type: 'checkbox',
                        name: 'blank',
                        label: 'Open link in a new tab'
                    },
                    {
                        type: 'radio',
                        name: 'active',
                        label: 'Active Something'
                    }


                ],
                onsubmit: function (e) {
                    target = '';
                    if(e.data.blank === true) {
                        target += 'newtab="on"';
                    }
                    editor.insertContent('[show_popup  title="' + e.data.textboxName + '" content="' + e.data.multilineName + '" timeformat="' + e.data.timeformat + '" something="' + e.data.active + '" ' + target + ' ]');
                  }
               });
           }
       });
   });
})();

Remember One thing, radio type will act like a checkbox because radio button not complete yet, see here https://github.com/tinymce/tinymce/blob/ca0f454b9001b9f20aa26349b25f6d839c1a1146/js/tinymce/skins/lightgray/Radio.less

But if you want to multiple radio button options then you can use listbox (Dropdown) instead multiple radio types.

Hope it helps you.

  • Thanks @mldb its seems that your answer is on my however, i need to have multiple values of checkbox and they should be dynamic. Any possible way I could do that? – bagpipper Sep 14 '16 at 4:02
0

I've been two days fighting this Tinymce just for make a simple data validation and found this good stuff:

1- Contains all field types supported by Tinymce windowmanager https://jsfiddle.net/aeutaoLf/2/

2.- Contains a way to validate windowmanager data before closing https://stackoverflow.com/questions/34783759/how-to-validate-tinymce-popup-textbox-value#answer-38765360

Hope it helps you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.