javascript - 如何将 ACE 与我的 ASP.NET MVC 应用程序一起使用？

Question

我想使用 ACE我元素中的在线代码编辑器。我如何在 ASP.NET MVC 中使用它？

我想将使用该编辑器所做的任何编辑保存在数据库中。我该怎么做？

Answer 1

假设您有一个强类型模型，其属性名为 Editor与其中的数据。现在使用正常的 <div>加载数据:

<div id="editor"><%=Model.Editor %></div>

现在您可以使用 javascript 创建一个 ace 编辑器来代替 div:

<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
};
</script>

现在当你想保存数据时，例如通过表单发布，使用类似这样的东西将它绑定(bind)回 Editor模型的属性:

<%=Html.HiddenFor(m=>m.Editor, new { @id = "hidden_editor" }) %>

<!-- this is jQuery, but you can use any JS framework for this -->
<script>
    $("form").submit(function () {
        $("#hidden_editor").val(editor.getSession().getValue());
    });
</script>

在您的 Controller 中，您现在可以将数据保存到数据库中

[HttpPost]
public ActionResult Index (IndexModel model) {
    var data = model.Editor;
    // save data in database
}