CKEditor 在 ASP.MVC 中显示 HTML 标签并进行解码

Question

一切都与 create/edit 页面完美配合，其中 CKEditor 对输入进行编码，服务器端 returns 解码以供 CKEditor 显示。 window 发生验证错误时，页面在到达服务器后会重新加载。

即使我在 return 上解码到视图，CKEditor 也不会正确呈现 html 标签。如果我对同一字段执行 Html.Raw，我可以看到它正确显示 html，因此解码没有问题。对于我的生活，我无法弄清楚为什么这种情况与编辑（从 dB 将现有 html 加载到 CKEditor）有什么不同，后者工作得很好。但是在页面重新加载时，一切都变得不正常了。

我尝试过的东西，解码，编码，都没有。为 CKEditor 初始化添加延迟。

服务器端return代码。

if (!ModelState.IsValid)
        {
            q..Text = System.Net.WebUtility.HtmlDecode(q.Text);
            return View(q);
        }

查看

    <div class="form-group">
        @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Text, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Question.Text, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.Raw(Model.Text)
        </div>
    </div>

JavaScript 用于 CKEditor

    var ckEditorInstance;

    $(document).ready(function () {
        CKEDITOR.replace('Text', { htmlEncodeOutput: true, enterMode: CKEDITOR.ENTER_BR });
        ckEditorInstance = CKEDITOR.instances.Text;
        ckEditorInstance.on('instanceReady', function () { UpdateTextArea(); });
        ckEditorInstance.on('change', function () { UpdateTextArea(); });

    });

    function UpdateTextArea() {
        ckEditorInstance.updateElement();
    };

</script>

使用 CKEditor v4.8.0 • 13-12-2017

显示问题的图像，在 CKEditor @Html.Raw(Model.Text) 输出下方，显示 html 已正确解码。

Answer 1

通过使用 @Html.Raw(Model.Text) 而不是 TextAreaFor 解决了这个问题随着 @Html.HiddenFor(model=>Model.Text)

发布到 server/controller 时保留数据并且 Javascript 更新隐藏字段并编码 html

   <script type="text/javascript">

    var ckEditorInstance;

    $(document).ready(function () {
        CKEDITOR.replace('ckEditorRaw', { enterMode: CKEDITOR.ENTER_BR });
        ckEditorInstance = CKEDITOR.instances.ckEditorRaw;
        ckEditorInstance.on('instanceReady', function () { UpdateTextArea(); });
        ckEditorInstance.on('change', function () { UpdateTextArea(); });
        });

    function UpdateTextArea() {
        ckEditorInstance.updateElement();
        //Set hidden field and escape html
        $("#Question_Text").val(new Option((ckEditorInstance.getData())).innerHTML)
    };

</script>

CKEditor 在 ASP.MVC 中显示 HTML 标签并进行解码

CKEditor showing HTML tags in ASP.MVC with decode

html

javascript

asp.net-mvc

jquery

ckeditor