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

Question

我正在使用jquery验证和tinymce的jQuery版本。

我发现这段代码让tinymce在每次改变它的时候验证自己。

嗨

我使用我的jQuery TinyMCE的jQuery的验证，所以我有这个在我的代码

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

这工作但有一个问题。如果用户从单词中复制某些东西，它会带来所有那些通常超过50,000个字符的垃圾样式。这是我的字符数量允许用户键入英寸

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

然而，消息仍然存在。

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

任何人有任何想法？

Answer 1

噢，我也遇到了这个问题。

因此，我通过调用按钮的单击事件的验证来修复它。

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

This works try it。

有关其他资源尝试

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 2

最近，我有一些相关的困难时，事件处理火灾的时间，尤其是在字符的大小从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 3

这个工作对我来说...我加的小字段的值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 4

后摆弄如何获得验证与TinyMCE的编辑，我终于发现，有必要告诉工作小时验证插件不会忽略隐藏字段（因为初始化tinyMCE时隐藏原始文本区域）。因此，在短期的解决方案是：

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

这段代码告诉jQuery验证插件来检查隐藏字段，以及...然后你可以正常...

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

这不是直接回答原始问题 - 我知道。但是因为这个页面是谷歌＃1的“jquery验证tinymce”我认为这是一个很好的地方在这里提到它。

danludwig这里提到了这一点：Unable to get TinyMCE working with jQuery Unobtrusive Validation

Answer 5

的问题是，编辑的内容尚未运行验证时复制到相关的文本区域。在http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/建议的解决方案适用于我。我将它推广了一点，因为在我的场景中，textareas的数量和它们的ID在运行时并不知道。

所以在单击事件处理程序我手动拷贝过来的值对每个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 6

这个工作对我来说：

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

    tinyMCE.init({ 

     ..... 

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

我希望这对你的作品，

Answer 7

感谢Willhelm给我这个想法（不幸的是，他的代码没有工作，如果你h在您的表单中添加多个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的focusInvalid功能治疗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 
         } 
        } 
       } 
   } 
   

注：您可能希望通过以下块环绕你TinyMCE的代码万一有加载tinymce的问题（或者JS未包括在某些页面中）。

if (typeof tinymce !== "undefined")