Question

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

编辑：请注意，此处的视图是部分视图。

Error in Browser

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

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

<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; }
...

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

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']
        ]
    });
}

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

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

2 个答案: