Question

一切都与创建/编辑页面完美配合，其中CKEditor对为CKEditor解码的输入和服务器端返回进行编码以显示。发生验证错误后，所有这些都会在页面重新加载到服务器后重新加载。

即使我在返回视图时进行解码，CKEditor也无法正确呈现html标签。如果我为同一个字段做Html.Raw，我可以看到它正确显示html，所以它没有解码的问题。对于我的生活，我无法弄清楚为什么这种情况与编辑（将现有的html从dB加载到CKEditor）完全不同。但是在页面重新加载时，一切都没有了。

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

服务器端返回代码。

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>

CKEditor的JavaScript

    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)

在发布到服务器/控制器时保留数据和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中显示带有解码

1 个答案: