如何在我的ASP.NET MVC應用程序中使用ACE？

Question

我想在我的項目中使用ACE在線代碼編輯器。我如何在ASP.NET MVC中使用它？

我想保存對該編輯器在數據庫中進行的任何編輯。我怎麼做？

Answer 1

我們假設您有一個強類型模型，其中包含一個名爲Editor的數據。現在使用正常<div>加載數據：

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

現在可以創建到位的div JavaScript的王牌編輯：

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

現在，當你要保存的數據，例如通過表單後，使用這樣的綁定回模型的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> 

在你的控制器，你現在可以將數據保存到d atabase

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

Answer 2

下面是使用最新技術（剃刀/ MVC /阿賈克斯）解決方案：

$(document).ready(function() { 
     $("#btnSave").on("click", function() {     
       $.ajax({ 
        url: '@Url.Action("YourAction", "YourController")', 
        type: 'POST', 
        data: { id: @Model.ID, 
          html: ace.edit("editor").getValue() }, 
        cache: false, 
        success: function (response) { 
         alert("Changes saved."); 
        }       
       }); 
     }); 
    }); 

在控制器：

[AjaxAuthorize] 
    [HttpPost, ValidateInput(false)] 
    public ActionResult YourAction(string id, string html) 
    { 
     if (id == null || String.IsNullOrEmpty(id)) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 
     // do you stuff 
    } 

Answer 3

這是我最後只是在Razor Views

@model OfficeGx.Cms.Model.ClassName 
<div class="form-group row"> 
    <div class="col-lg-11"> 
     @Html.HiddenFor(x => x.CascadingStylesHdn, new { @id = "hidden_cssEditor" }) 
     @Html.LabelFor(x=>x.CascadingStyles) 
     <div id="cssEditor">@Model.CascadingStyles</div> 
    </div> 
</div> 
<div class="form-group row"> 
    <div class="col-lg-11"> 
     @Html.HiddenFor(x => x.JavaScriptHdn, new { @id = "hidden_jsEditor" }) 
     @Html.LabelFor(x => x.JavaScript) 
     <div id="jsEditor">@Model.JavaScript</div> 
    </div> 
</div> 
<script> 
    var cssEditor; 
    var jsEditor; 
    window.onload = function() { 
     cssEditor = ace.edit("cssEditor"); 
     cssEditor.getSession().setMode("ace/mode/css"); 
     cssEditor.setTheme("ace/theme/twilight"); 

     jsEditor = ace.edit("jsEditor"); 
     jsEditor.getSession().setMode("ace/mode/javascript"); 
     jsEditor.setTheme("ace/theme/xcode"); 
    }; 
    $("form").submit(function() { 
     $("#hidden_cssEditor").val(window.cssEditor.getSession().getValue()); 
     $("#hidden_jsEditor").val(window.jsEditor.getSession().getValue()); 
    }); 
</script> 
<style> 
    #cssEditor, #jsEditor { 
     position: relative; 
     height: 400px 
    } 

    @Model.CascadingStyles 
</style> 

In my Con troller添加/編輯方法

[HttpPost] 
     [ValidateInput(false)] 
     public ActionResult AddEdit(Article article, FormCollection formCollection) 
     { 
      article.CompanyId = OperatingUser.CompanyId; 
      article.CascadingStyles = article.CascadingStylesHdn; 
      article.JavaScript = article.JavaScriptHdn;