在控件中输入文本后，CKEditor onSubmit 不起作用

Question

所以我在我的项目中安装了 ckeditor。控件加载正常，您可以查看它。当您在 textarea 中键入内容时会发生错误。 “下一步”按钮不起作用。如果文本区域中没有文本，则“下一步”按钮可以正常工作。当有文本并且您按下“下一步”按钮时，我也会在浏览器中注意到这些错误。

编辑：请注意这里的视图是部分视图。

我正在使用 ckeditor 3.6.4。我使用 Nuget 安装了它。我有相应的文件。

在我的 _Shared/Layout 文件中，我包含以下内容：

<script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/adapters/jquery.js")"></script>

在我看来，我有以下几点：

@using (Ajax.BeginForm("SomeAction", "SomeController", new { id = Model.Id}, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "dynamicData", InsertionMode = InsertionMode.Replace }))
        {
            <div class="grid_6">
                @Html.TextAreaFor(x => x.SomeText, new { @class = "someTextArea" })
            </div>

            <div class="grid_6 alpha omega">
                <input type="submit" value="Next" class="grid_6 alpha omega button drop_4 gravity_5" />
            </div>
        }

在我的 javascript 中，我有以下内容：

<script type="text/javascript">
    $(function () {
        ReBindCKEditor();
    });

    function BindCKEditor() {
        var elem = $('#SomeText');
        elem.ckeditor(function () { }, { toolbar: [
        ['Source'],
        ['Preview'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Image', 'Table', 'HorizontalRule'],
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'Strike'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
        ['Link', 'Unlink', 'Anchor']
        ]
        });
    }

    function ReBindCKEditor() {
        delete CKEDITOR.instances['SomeText'];
        BindCKEditor();
    }
</script>

Answer 1

在提交之前，您需要更新 ckeditor 使用的隐藏文本字段。这可以通过

for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();

假设您将其包装在一个名为 BeforeSubmittingCKEditor 的 javascript 函数中以遵循您上面的命名，那么您可以在 BeginForm 中添加以下钩子

OnBegin = "BeforeSubmittingCKEditor"

所以你的 AjaxOptions 看起来像这样：

new AjaxOptions { HttpMethod = "Post", 
                  UpdateTargetId = "dynamicData", 
                  InsertionMode = InsertionMode.Replace,
                  OnBegin = "BeforeSubmittingCKEditor" }

Answer 2

很可能（如果没有关于错误的更多详细信息，很难 100% 确定 - 错误响应的实际内容会有所帮助）您正在点击 “从客户端检测到潜在危险的 Request.Form 值" 问题在这里。默认情况下，ASP.NET MVC 框架在模型绑定期间检查请求，以确定它们是否包含作为 HTML 标记的潜在危险内容。如果检测到 HTML，模型绑定会抛出错误。

有两种方法可以解决这个问题。首先在服务器端的模型类中使用AllowHtmlAttribute：

...
[AllowHtml]
public string SomeText { get; set; }
...

第二种方法是在 CKEditor 中使用htmlEncodeOutput 选项启用客户端输出编码：

function BindCKEditor() {
    var elem = $('#SomeText');
    elem.ckeditor(function () { }, {
        htmlEncodeOutput: true,
        toolbar: [
            ['Source'],
            ['Preview'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
            ['Image', 'Table', 'HorizontalRule'],
            ['Styles', 'Format'],
            ['Bold', 'Italic', 'Strike'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['Link', 'Unlink', 'Anchor']
        ]
    });
}

要进行更详细的分析，我们需要查看完整的错误消息。