我已将 CKEditor 3（以前的 FCKEditor）集成到我的 asp.net MVC（具体来说是 v3）应用程序中。我的模型中有一个RequiredAttribute，用于需要编辑器的字段，但客户端验证不能与CKEditor 一起正常工作。当我尝试提交并将数据输入 CKEditor 时，所需的验证看不到数据。如果我再次尝试重新提交，那么它可以工作。我在网上看了一圈，找不到解决办法。我也在使用 Jquery 并使用 Jquery 适配器
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter
【问题讨论】：
标签： asp.net-mvc ckeditor asp.net-mvc-3
感谢您的回答。 感谢这篇文章，我找到了自己的解决方案，非常适合我的情况。
如果您不想使用 click/mousedown 事件，而是想在正确的表单提交事件上触发验证，您可以使用以下方法。
它既不使用 jQuery-Adapter CKEditor 插件也不使用点击事件。 并且可以通过 ckeditor 将其应用于所有表单。
$('form').on('submit.ckeditorValidation', function () {
var $this = $(this);
var $ckeditor = $this.find('textarea.ckeditor');
// if no ckeditor for this form then do nothing
if (!$ckeditor || !$ckeditor.length) {
return true;
}
// update content from CKEditor to TextArea
var textAreaId = $ckeditor.attr('id');
CKEDITOR.instances[textAreaId].updateElement();
// trigger validation and check if the form is valid
if (!$this.valid()) {
return false;
}
// if form is valid then
// unsubscribe current event handler to avoid endless recursion
// and re-trigger form submit
$(this).off('submit.ckeditorValidation').submit();
return true;
});
【讨论】：
我无法使用上述解决方案修复它，但这对我有用；
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
CKEDITOR.replace("activiteit_details", { toolbar: 'Basic' });
CKEDITOR.replace("activiteit_verslag", { toolbar: 'Full' });
// Bind CKeditor fields on submit (To avoid problems with the RequiredAttribute)
$('input[type=submit]').bind('click', function () {
var CKactiviteit_details = CKEDITOR.instances.activiteit_details.getData();
$("#activiteit_details").val(CKactiviteit_details);
var CKactiviteit_verslag = CKEDITOR.instances.activiteit_verslag.getData();
$("#activiteit_verslag").val(CKactiviteit_verslag);
});
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
...
<div class="editor-label">
@Html.LabelFor(model => model.activiteit_details)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.activiteit_details)
@Html.ValidationMessageFor(model => model.activiteit_details)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.activiteit_verslag)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.activiteit_verslag)
@Html.ValidationMessageFor(model => model.activiteit_verslag)
</div>
...
<p>
<input type="submit" value="Opslaan" />
</p>
</fieldset>
【讨论】：
如果有人正在寻找更通用的方法来执行此操作，您可以添加此 javascript：
$(document).ready(function () {
if ($('.text-editor')) {
$('.text-editor').ckeditor();
$('input[type=submit]').bind('click', function() {
$('.text-editor').ckeditorGet().updateElement();
});
}
});
并在 textarea 上使用 .text-editor css 类，它工作得很好。
@Html.TextAreaFor(model => model.Description, new { @class = "text-editor" })
我发现这个解决方案比其他解决方案更容易，希望它可以帮助！
【讨论】：
如果不使用 jQuery 适配器，那就更简单了：
$(function () {
$('input[type="submit"]').click(function () {
CKEDITOR.instances.Body.updateElement();
});
});
其中 Body 是文本区域的 ID。
【讨论】：
对我来说，这段代码可以解决问题，它可能会进行一些优化，但它可以工作：
$('#newsForm').submit(function (event) {
var editor = $('#Body').ckeditorGet();
editor.updateElement();
$(this).validate().form();
});
因为我不知道提交的事件处理程序以什么顺序运行，所以我确保更新值并刷新验证结果。
编辑：更新的解决方案
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#Body').ckeditor();
$('#newsForm').bind('submit', onFirstSubmit);
});
function onFirstSubmit(event) {
var editor = $('#Body').ckeditorGet();
editor.updateElement();
$(this).validate().form();
$(this).unbind('submit', onFirstSubmit).submit();
}
//]]>
</script>
【讨论】：
我也尝试使用 CKEditor，但没有成功。我一直在使用CLEditor（以及必需的属性），它对我来说很好。
有没有想过试试这个？
【讨论】：
我遇到过同样的问题，但由于另一个相关问题，我无法解决。
当 ckeditor 替换 textarea 时，它会使其隐藏，我发现 jquery 验证器的默认设置是使用 ":hidden" 选择器忽略隐藏元素。
要解决此问题，我必须更新隐藏选择器并更新元素值。这是我在文档就绪事件中执行此操作的代码，现在正在运行
$('#frmid').validate().settings.ignore = "input:hidden";
$('input[type="submit"]').click(function () {
$("#txtarea").val(CKEDITOR.instances["txtarea"].getData());
});
【讨论】：