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

【问题标题】：How to get TinyMCE and Jquery validate to work together?如何让 TinyMCE 和 Jquery 验证一起工作？
【发布时间】：2011-02-25 09:55:57
【问题描述】：

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

我发现这段代码可以让 tinymce 在每次发生变化时验证自己。

嗨

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

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

这可行，但是有一个问题。如果用户从 word 中复制某些内容，它会带来所有垃圾样式，通常超过 50,000 个字符。这超出了我允许用户输入的字符数。

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

但消息仍然存在。

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

有人有什么想法吗？

【问题讨论】：

标签： jquery tinymce jquery-validate

【解决方案1】：

经过数小时摆弄如何使用 TinyMCE 编辑器进行验证后，我终于发现有必要告诉验证插件不要忽略隐藏字段（因为在初始化 tinyMCE 时隐藏了原始文本区域）。所以简而言之的解决方案是：

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

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

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

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

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

【讨论】：

感谢您的回答。很久以前这不是必需的，今天，在 jquery 和验证器更新之后，我注意到旧代码停止工作。这解决了它。

【解决方案2】：

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

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

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

这个作品试试看。

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

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

【讨论】：

哈哈。我试过了，认为它不起作用。显然我在尝试时提交了错误的表格。当您提出建议时，我尝试了另一种提交正确的表格，哈哈。所以现在它可以工作了。改变时会很好，但这也很好。

【解决方案3】：

问题是在运行验证时，编辑器的内容还没有被复制到相关的文本区域中。 http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/ 建议的解决方案对我有用。我稍微概括一下，因为在我的场景中，文本区域的数量和它们的 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);
}

【讨论】：

【解决方案4】：

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

这是正确的做法：

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

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

【讨论】：

【解决方案5】：

最近，我在事件处理程序触发的时间方面遇到了一些相关的困难，特别是当从 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。

【讨论】：

【解决方案6】：

这对我有用...我将小字段的值添加到 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>

【讨论】：

【解决方案7】：

这对我有用：

var form = $('form').validate({ .... }); tinyMCE.init({ ...... 设置：功能（编辑）{ ed.on('模糊', function() { $("textarea").html(tinyMCE.activeEditor.getContent()); }); } });

我希望这对你也有用

【讨论】：

【解决方案8】：

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

它有几个部分：

即使 tinymce 的 textarea 是隐藏的，我们也需要将该元素列入白名单，以便验证器可以在其上运行。
```
$.validator.setDefaults({
    ignore: ":hidden:not(.rich-text-editor)"
});
```

初始化 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();
        });
    }
});

在提交任何表单之前保持底层textareas。

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

更新 validator 的 focusInvalid 函数以特殊处理 tinymce 的 textareas

    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 时出现问题（或某些页面中未包含 JS），您可能需要将 tinymce 代码包围在以下块中。

if (typeof tinymce !== "undefined")

【讨论】：

感谢您的反馈，我已经更详细地更新了答案。