CODEWITHSUNDEEP
javascriptwordpresstinymce
Chris Brosnan
Chris Brosnan

Reputation: 197

WordPress TinyMCE Editor plugin not copying values from input boxes into shortcode. Displaying VALUE="undefined" for each

I am building a custom plugin on WordPress to insert a [video_embed] shortcode with two attributes ("id" and "border"). The button for the TinyMCE editor that I have created is working but does not register the values. I have tried different ways of assigning the values to be passed but they do not work. The shortcode below is always returned as when I assign the variable 'returnText' as also shown. However I know this is not correct but in other methods I have tried no shortcode is returned:

[video_embed id="undefined" border="undefined"]

var returnText = '\[video_embed id="' + win[0] + '" border="' + win[1] + '"\]';

Is there something I'm missing? My full code for the JS file for the button is below. 

(function(){
  tinymce.create('tinymce.plugins.vidembedtinymceplugin', {
    init: function(ed, url){
      ed.addButton('vidembedbtn', {
        title: 'Video Embed',
        cmd: 'vidembedBtnCmd',
        image: url + '/video-btn.png'
      });
      ed.addCommand('vidembedBtnCmd', function(){
        var selectedText = ed.selection.getContent({format: 'html'});
        var win = ed.windowManager.open({
          title: 'Video Embed Properties',
          body: [
            {
              type: 'textbox',
              name: 'vidid',
              label: 'Video ID',
              minWidth: 500,
              value: ''
            },
            {
              type: 'textbox',
              name: 'border-color',
              plugins: "textcolor colorpicker",
              toolbar: "forecolor backcolor", 
              label: 'Border Color',
              minWidth: 500,
              value : ''
            },
          ],
          buttons: [
            {
              text: "Ok",
              subtype: "primary",
              onclick: function(v) {
            win.close();
            var returnText = '\[video_embed id="' + win[0] + '" border="' + win[1] + '"\]';   
            var open = '\[';
            var close = ']';
            ed.execCommand('mceInsertContent', 0, returnText);
          }
        },
        {
          text: "Skip",
          onclick: function() {
            win.close();
            var returnText = '' + selectedText + '';
            ed.execCommand('mceInsertContent', 0, returnText);
          }
        },
        {
          text: "Cancel",
          onclick: function() {
            win.close();
          }
        }
      ],
    onsubmit: function(e){
        var params = [];
        if( e.data.vidid.length > 0 ) {
          params.push('id="' + e.data.vidid + '"');
        }
        if( e.data.border-color.length > 0 ) {
          params.push('border="' + e.data.border-color + '"');
        }
        if( params.length > 0 ) {
          paramsString = ' ' + params.join(' ');
        }
        var returnText = '' + selectedText + '';
        ed.execCommand('mceInsertContent', 0, returnText);
      }
    });
  });
},
getInfo: function() {
  return {
    longname : 'Video Embed',
    author : 'Plugin Author',
    authorurl : 'https://www.axosoft.com',
    version : "1.0"
  };
}
});
tinymce.PluginManager.add( 'vidembedtinymceplugin', 
tinymce.plugins.vidembedtinymceplugin );
})();

Upvotes: 1

Views: 133

Answers (1)

Sally CJ
Sally CJ

Reputation: 15620

First off, change all the e.data.border-color to e.data['border-color']!

The reason is because the key (which is border-color) contains a dash (-). But for more info, see the MDN doc. (find the section that has "any property name that is not a valid JavaScript identifier")

Now here's how you can solve the "undefined" issue:

  1. The onclick value of the "Ok" button should be set to submit. So use this instead of what you currently have:

    {
  text: "Ok",
  subtype: "primary",
  onclick: 'submit'
},

  2. In the onsubmit() function, change this:

    if( params.length > 0 ) {
  paramsString = ' ' + params.join(' ');
}
var returnText = '' + selectedText + '';

    to this one:

    params = params.join(' ');
var returnText = (params ? '\[video_embed ' + params + '\]' : '') +
    selectedText + '';

Try a demo

Upvotes: 1

Related Questions