我有一个包含多个 TinyMCE 编辑器的表单。有些编辑器是高级的，有些是简单的编辑器。我使用jquery validation plugin 在客户端进行验证。我一直在通过添加以下代码来验证单个 TinyMCE 编辑器。
$('#submit').click(function() {
var content = tinyMCE.activeEditor.getContent(); // get the content
$('#description').val(content); // put it in the textarea
});
但是现在我应该验证所有编辑器，有什么想法吗？？
【问题讨论】：
标签： jquery validation tinymce
试试
$('#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();
});
【讨论】：
description 我们可以以某种方式获取相应的文本区域的 id，以便我们将内容从编辑器到它对应的文本区域。
一种更通用的方法是将编辑器内容保存回 textarea，然后让 jquery 验证在 textarea 本身中发挥作用
tinymce.init({
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
}
});
因为 tinymce textarea 是隐藏的，所以您还必须将 jquery 验证代码更新为类似这样的内容
$('#myform').validate({
ignore: ':hidden:not(textarea)'
});
【讨论】：
这样试试
java脚本代码
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
HTML代码
第一个 TinyMCE
<textarea rows="" cols="" id="first" class="validate[required] text-input tinymce"></textarea>
第二个 TinyMCE
<textarea rows="" cols="" id="second" class="validate[required] text-input tinymce"></textarea>
我也是这样用的，效果很好
【讨论】：
如果您有 Html 编辑器 tinymce，所需的验证无法正常工作，您可以使用此代码解决您的问题， 在您的应用程序中安装 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();
}
});
希望你的问题可以解决
【讨论】：
根据我的经验，jquery 验证对 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);
}
});
【讨论】：
【讨论】：