Question

请任何人帮助我。我需要tinyMCE弹出文本框验证。单击确定时如何验证文本框这里我使用下面的代码。

tinymce.PluginManager.add('weblink', function(editor, url) {
    editor.addButton('weblink', {
        text: 'Web Link',
        icon: false,        
        onclick: function() {
            editor.windowManager.open({
                title: 'Web Link',
                body: [
                {type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
                {type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
                ],
                onsubmit: function(e){
                    var weblinkTxt  =   "href='"+e.data.weburl+"'";

                        if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
                        {
                            editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
                        }
                        else
                        {
                            editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
                        }

                }
            });
        }
    });  
});

Answer 1

我刚刚发现需要在TinyMCE中验证来自对话框的输入。不幸的是，似乎没有本土方法可以做到这一点。但是，我找到了一种方法，使用e.preventDefault()。

想法是在提交函数启动后立即使用e.preventDefault()，然后管理对话窗口。这样，就可以验证输入：

如果无效，则向用户显示警告，对对话框窗口不执行任何操作。它将保持打开状态，用户必须插入一个新值;
如果有效，则关闭窗口对话框并继续使用该方法执行任何操作。

应用于你的例子，就像这样：

tinymce.PluginManager.add('weblink', function(editor, url) {
    editor.addButton('weblink', {
        text: 'Web Link',
        icon: false,        
        onclick: function() {
            editor.windowManager.open({
                title: 'Web Link',
                body: [
                {type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
                {type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
                ],
                onsubmit: function(e){
                    //this will prevent TinyMCE from closing the window dialog
                    e.preventDefault();

                    /*here you apply your validations to e.data.weburl
                      and to e.data.caption*/

                    if(isNotValid){
                        /*The validation failed, so let's tell the user about it.
                          The empty function is to let TinyMCE know that it should
                          do nothing when clicking on the "OK" button. Without it,
                          I experienced different behaviour when clicking on
                          "OK" and when pressing "Enter".*/
                        editor.windowManager.alert('Invalid input!', function(){});
                    } else {
                        /*It is valid, so let's first close the
                          dialog window, and then do what you want*/
                        editor.windowManager.close();

                        var weblinkTxt  =   "href='"+e.data.weburl+"'";

                        if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
                        {
                            editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
                        }
                        else
                        {
                            editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
                        }

                    }
                }
            });
        }
    });  
});

希望这仍然可以帮助您或任何人也面临这个问题！

如何验证tinyMCE弹出文本框值

1 个答案: