MVC：将 CKEditor textarea 值绑定到模型

Question

我选择 CKEditor 作为我的 ASP.Net MVC 项目的富文本编辑器组件。

渲染富文本编辑器不是问题（事实上很容易）：

@Html.TextAreaFor(model => model.MessageDiffusion.Message, new { @id = idRichTextEditor })

<script type="text/javascript">
    $(document).ready(function () {
    // Rich Text Editor (CKEditor) Configuration 
        CKEDITOR.replace(
            idRichTextEditor, {
                language: 'fr'
            }
        );
    });
</script>

呈现：

我的问题与 post 处理数据有关。如果我将消息更改为：'The new message' 我仍然会在 post:

上收到 'The old message'

我的意思是，viewModel 将有一条属性消息，其中包含 'The old message' 而不是 'The new message'。我试图在 post (onBegin) 之前立即执行以下操作：

  $('#idRichTextEditor').text(CKEDITOR.instances["idRichTextEditor"].getData());

或者：

$('#idRichTextEditor').val(CKEDITOR.instances["idRichTextEditor"].getData());

哪个没有帮助...我也试过了：

for (var instanceName in CKEDITOR.instances) {
    CKEDITOR.instances["idRichTextEditor"].updateElement();
}

但我似乎无法将CKEditor 的文本区域与我的模型绑定。我想说明的是，如果我把这个富文本区域变成一个普通文本区域，我可以很容易地在控制器端获得'The new message'。

我想声明，尽管以下 Whosebug 的讨论很有趣并且与我的问题相关，但对我的帮助不大：

CKEditor MVC 3 implementation Help needed

CKEditor and ASP.Net MVC 3 RequiredAttribute

我认为问题可能与

在 CKEditor 中设置数据是一个异步操作，如果任何元素是编辑器，val('some data') 将return一个jQueryPromise 对象。您可以将它与 jQuery 助手一起使用： $.when( $( '#editor' ).val( 'foo' ) ).then( 函数() { // 现在您确定数据已设置。 } );

我在这里阅读了这些信息： CKEditor 4 documentation

更新：我刚刚意识到当我第二次post数据时，富文本信息正确绑定到我的消息属性视图模型。这意味着如果我点击 'save button' 两次而不是一次...

我可以得到我想要的东西

Answer 1

我想我只是没有在 Whosebug 上搜索得足够好，它确实对所有问题都有答案。正确答案是：

$('#YOURFORMID').on('submit', function(){
    for ( instance in CKEDITOR.instances ) {
        CKEDITOR.instances[instance].updateElement();
    }
});

我在这里找到的：

CKEDITOR doesn't submit data via ajax on first submit

MVC：将 CKEditor textarea 值绑定到模型

MVC: Binding CKEditor textarea value to the model

c#

model-view-controller

asp.net-mvc

ckeditor

asp.net-mvc-4