javascript – 如何验证tinyMCE弹出文本框值

请任何人帮助我.我需要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)
                        }

                }
            });
        }
    });  
});

解决方法:

我刚刚发现需要在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)
                        }

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

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

上一篇:django tinymce不显示丰富的textarea


下一篇:javascript-TinyMCE放置在Bootstrap模式对话框中时无法全屏显示