如何让TinyMCE和Jquery验证一起工作？

Question

我正在使用jquery validate和tinquce的jquery版本。

我发现这段代码可以让每次出现变化时都能自我验证。

您好

我正在使用jquery validate和我的jquery tinymce，所以我在我的代码中有这个

    // update validation status on change
    onchange_callback: function (editor)
    {
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
    },

然而这有一个问题。如果用户从单词复制某些东西，它会带来所有垃圾样式，通常超过50,000个字符。这超过了我允许用户输入的字符数量。

所以我的jquery验证方法告诉我他们超过了限制。虽然tinymce已经清理了这个烂摊子，但现在用户可能没有超过限制。

然而，信息仍在那里。

那么有一个更好的函数调用我可以把它放进去吗？也许告诉tinymce在粘贴发生时延迟有效，或者可能是一个不同的回调？

有人有任何想法吗？

Answer 1

在摆弄了如何使用TinyMCE编辑器进行验证后，我终于发现有必要告诉验证插件不要忽略隐藏字段（因为初始化tinyMCE时隐藏了原始textarea）。因此，简而言之就是：

$.validator.setDefaults({
    ignore: ''
});

此代码告诉jquery Validation Plugin检查隐藏字段......然后你可以正常...

 onchange_callback: function (editor)
{
    tinyMCE.triggerSave();
    $("#" + editor.id).valid();
},

这不是原始问题的直接答案 - 我知道。但是由于这个页面被谷歌称为“jquery validate tinymce”，我认为这是一个在这里提及它的好地方。

danludwig在此提到：Unable to get TinyMCE working with jQuery Unobtrusive Validation

Answer 2

哦，是的，我也遇到了这个问题。

所以，我通过调用按钮的click事件验证来修复它。

$("#buttontosave").click(function() {
         tinyMCE.triggerSave();
         var status;
         status = $("#myform").valid(); //Validate again
         if(status==true) { 
             //Carry on
         }
         else { }
});

这可以尝试。

有关其他资源，请尝试

http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23941005.html

Answer 3

问题是，在运行验证时，编辑器的内容尚未复制到相关的textarea中。 http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/建议的解决方案对我有用。我把它概括了一点，因为在我的场景中，textareas的数量和它们的ID在运行之前是未知的。

因此，在click事件处理程序中，我为每个TinyMCE编辑器手动复制值：

for (var i = 0; i < tinyMCE.editors.length; i++) {
    var textarea = tinyMCE.editors[i].getElement();
    var newText = tinyMCE.editors[i].getContent();      
    $(tinyMCE.editors[i].getElement()).text(newText);
}

Answer 4

最近，我遇到了一些与事件处理程序触发时间有关的困难，特别是当从Word粘贴的字符缓冲区的大小增加时。我感兴趣的事件是关键：当用户键入标题字段（对于博客文章）时，应用程序会更新自动生成的永久链接字段。我最终采用了腰带和吊带的方法：处理关键并处理更改事件，以防万一。我的代码的删节版本：

hdlHeadlineChange = function (code) {

    //NOTES: The 'code' argument is for debugging purposes only: it helps you
    //figure out which event has fired.

    var headlineText = $(tinyMCE.selectedInstance.getBody()).text();

    //heuristically detect and ignore text with embedded Microsoft Word markup
    if (headlineText.match(/<!--/)) {
        return;
    }

    //as a backstop, trim excessively long text to fit database maximum lengths
    var truncateLength;    
    var semanticTitle = replaceSpecialCharactersInSemanticUrl(headlineText);

    //trim the permalink to fit the 255-character max in the database            
    truncateLength = 255 - $('#permalinkPreface').text().length;
    $('#permalinkSpan').text(semanticTitle.substring(0, truncateLength));
};

function setupHeadlineEventHandlers() {
    tinyMCE.get("headline").onKeyUp.add(function(ed, evt) {
        hdlHeadlineChange(evt.keyCode);
    });

    //NOTES: This handler is sort of a backstop.  Although the key-up handler may see text
    //with markup, we expect that the change handler will not.
    $('#headline').change(function () {
        hdlHeadlineChange(-1);
    });
}

关键是我使用.change（）来设置事件处理程序，而不是onchange_callback。

Answer 5

这对我有用......我将小字段的价值添加到textarea

$(document).ready(function(){

    var form_validator = $("#form").validate({...});
});

function Valid()
{   
var content= tinyMCE.get('desc').getContent();
$('#desc').val(content);
    return false;
}

<form id='form' onSubmit='return Valid();'>
<textarea id='desc'></textarea>

Answer 6

这对我有用：

    var form = $('form').validate({ .... });

    tinyMCE.init({

        .....

        setup: function(ed){
            ed.on('blur', function() {
                $("textarea").html( tinyMCE.activeEditor.getContent() );
            });
        }
    });

我希望这对你也有用

Answer 7

感谢Willhelm给我这个想法（不幸的是，如果你的表单中有多个textarea，他的代码就不起作用了。）

这是正确的方法：

    tinymce.init({
        setup: function(ed){
            ed.on("blur", function () {
                $("#" + ed.id).val(tinyMCE.activeEditor.getContent());
            });
        }
    }

这样我们根本不需要触摸验证器代码。

Answer 8

有关jquery.validation和tinymce的最新文档，请参阅此演示：https://jqueryvalidation.org/files/demo/tinymce/

有几个部分：

1. 即使隐藏了tinymce的textarea，我们也需要将元素列入白名单，以便可以在其上运行验证器。

   $.validator.setDefaults({
       ignore: ":hidden:not(.rich-text-editor)"
   });
   

2. 初始化tinymce，以便在更改时将其值保持在基础textarea。

   tinymce.init({
       selector: 'textarea.rich-text-editor',
       init_instance_callback: function (editor) {
           // update validation status on change`
           editor.on("Change", function (e) {
               tinyMCE.triggerSave();
               $(editor.targetElm).valid();
           });
       }
   });
   

3. 在提交任何表单之前，请保留基础textarea。

   var forms = $("form");
   if (forms.length > 0) {
       var validator = forms.submit(function () {
           // update underlying textarea before submit validation
           tinyMCE.triggerSave();
       }).validate();
   

4. 更新validator的{​​{1}}函数以处理tinymce的textareas特殊

   focusInvalid

注意：如果加载tinymce（或某些页面上没有包含JS），您可能希望通过以下块包围您的tinymce代码。

    validator.focusInvalid = function () {
        // put focus on tinymce on submit validation
        if (this.settings.focusInvalid) {
            try {
                var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
                if (toFocus.is("textarea")) {
                    tinyMCE.get(toFocus.attr("id")).focus();
                } else {
                    toFocus.filter(":visible").focus();
                }
            } catch (e) {
                // ignore IE throwing errors when focusing hidden elements
            }
        }
    }
}