如何讓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")