Question

我有一个包含多个TinyMCE编辑器的表单。有些编辑是先进的，有些是简单的编辑。我在客户端使用jquery validation plugin进行验证。我通过添加以下代码验证了单个TinyMCE编辑器。

$('#submit').click(function() {

    var content = tinyMCE.activeEditor.getContent(); // get the content

    $('#description').val(content); // put it in the textarea

});

但现在我应该验证所有编辑，任何想法??

Answer 1

尝试

$('#submit').click(function() {

  for (i=0; i < tinymce.editors.length; i++){
    var content = tinymce.editors[i].getContent(); // get the content

    $('#description').val(content); // put it in the textarea
  }
});

或更容易

$('#submit').click(function() {
     tinymce.triggerSave();
});

Answer 2

更通用的方法是将编辑器内容保存回textarea，然后让jquery验证在textarea本身中发挥作用

tinymce.init({
    setup: function (editor) {
        editor.on('init change', function () {
            editor.save();
        });
    }
});

因为隐藏了tinymce textarea，你还必须将你的jquery验证码更新为这样的

$('#myform').validate({
    ignore: ':hidden:not(textarea)'
});

Answer 3

尝试那样

java脚本代码

 jQuery(document).ready(function(){
            // binds form submission and fields to the validation engine
            jQuery("#formID").validationEngine();
        });

Html代码

First TinyMCE

 <textarea rows="" cols="" id="first" class="validate[required] text-input tinymce"></textarea>

Second First TinyMCE

<textarea rows="" cols="" id="second" class="validate[required] text-input tinymce"></textarea>

我也这样使用，它工作得很好

Answer 4

如果您有Html编辑器，那么所需的验证工作正常，您可以使用此代码来解决您的问题，在您的应用程序中安装tinymce 如果您有多个Htmleditor，您可以这样做我知道这是正确的解决方案，但你可以做到并解决这个问题

在模型中给出tinymce.cshtml页面ok的路径

  [Required(ErrorMessage = "Please enter About Company")]
  [Display(Name = "About Company : ")]
  [UIHint("tinymce_jquery_full"), AllowHtml]
  public string txtAboutCompany { get; set; }

  [Required(ErrorMessage = "Please enter About Company")]
  [Display(Name = "About Company : ")]
  [UIHint("tinymce_jquery_full"), AllowHtml]
  public string txtAboutCompany { get; set; }

现在在你的视图中添加一个这样的范围

 <div class="divclass">
     @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
     @Html.EditorFor(model => model.txtAboutCompany)
     <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
 </div>
<div class="divclass">
     @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
     @Html.EditorFor(model => model.txtAboutCompany)
     <span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
 </div>

在提交按钮点击事件

上创建jQuery

$("#BusinessProfile").click(function () {
    var aboutC = $("#txtAboutCompany").val()
    var pinfo = $("#txtProductinfo").val();
    if (aboutC == "" && pinfo == "") {
        $("#AC").append("").val("").html("Please enter about company")
        $("#PI").append("").val("").html("Please enter product information")
        $("#bpform").valid();
        return false;
    } else if (aboutC == "") {
        $("#PI").append("").val("").html("")
        $("#AC").append("").val("").html("Please enter about company")
        $("#txtAboutCompany").focus();
        $("#bpform").valid();
        return false;
    } else if (pinfo == "") {
        $("#AC").append("").val("").html("")
        $("#PI").append("").val("").html("Please enter product information")
        $("#txtProductinfo").focus();
        $("#bpform").valid();
        return false;
    }
    else {
        $("#AC").append("").val("").html("");
        $("#PI").append("").val("").html("");
        //return true;
        $("#bpform").validate();
    }
});

我希望你的问题可以解决

Answer 5

根据我的经验，jp验证对于tinyMCE编辑器有两个问题。首先，tinyMCE缓冲内容，因此jquery验证看到的基础文本区域内容并不总是反映编辑器。其次，通过jquery验证发现的textarea隐藏在tinyMCE结构深处的几个级别中。当jquery验证将其错误消息放在该文本区域之后时，该错误消息也将被隐藏。

有两个单独的jquery验证功能可以解决这些问题： Normalizers：允许您在验证之前转换字段的内容 Error Placement：允许您修改DOM中显示错误的位置。这两个都可以通过setDefaults方法进行全局配置，如下所示：

 jQuery.validation.setDefaults({
    normalizer:function(val){
        var ele = jQuery(this);
        if(window.tinyMCE.editors[ele.id]){
            window.tinyMCE.editors[ele.id].save();
            return window.tinyMCE.editors[ele.id].getContents();
        }
        return val;
    },
    errorPlacement:function(error,element)
    {
        var ele = jQuery(element);
        if(window.tinyMCE.editors[ele.id]){
            var realTarget = window.tinyMCE.editors[ele.id].getContainer().parent();
            error.insertAfter(realTarget);
        }
        error.insertAfter(element);
    }
});

Answer 6

相反，您可以使用TinyMCE的isDirty()方法

参考：Here

<强>用法

tinyMCE.activeEditor.isDirty（）

希望这有帮助

验证多个TinyMCE编辑器

6 个答案: