Question

我正在WordPress上构建自定义插件，以插入具有两个属性（“ id”和“ border”）的[video_embed]短代码。我创建的TinyMCE编辑器的按钮正在工作，但未注册值。我尝试了不同的方法来分配要传递的值，但是它们不起作用。当我分配变量“ returnText”时，总是返回下面的简码，也如图所示。但是我知道这是不正确的，但是在其他方法中，我尝试不返回任何简码：

[video_embed id =“ undefined” border =“ undefined”]

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

有什么我想念的吗？我的按钮JS文件的完整代码如下。

(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 );
})();

Answer 1

首先，将 all e.data.border-color更改为e.data['border-color']！

原因是因为键（border-color）包含连字符（-）。但有关更多信息，请参见MDN doc。（找到具有“ 任何无效JavaScript标识符的属性名称”的部分）

现在这是解决“未定义”问题的方法：

“确定”按钮的onclick值应设置为submit。所以使用它代替当前的内容：
```
{
  text: "Ok",
  subtype: "primary",
  onclick: 'submit'
},
```

在onsubmit()函数中，更改以下内容：

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

对此：

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

Try a demo

WordPress TinyMCE Editor插件不会将输入框中的值复制到简码中。每个显示VALUE =“ undefined”

1 个答案:

现在这是解决“未定义”问题的方法：