ASP.NET MVCアプリケーションでACEを使用するにはどうすればよいですか？

Question

私のプロジェクトでACEオンラインコードエディタを使いたいです。 ASP.NET MVCでどのように使用するのですか？

私はそのエディタで行われた編集をデータベースに保存したいと思います。それ、どうやったら出来るの？

Answer 1

データが入っているEditorというプロパティを持つ強力な型指定モデルがあるとします。例えば、今あなたがデータを保存したいとき

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

：

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

は今、あなたはJavaScriptを使用してdiv要素の代わりに、エースエディタを作成することができます。今すぐデータをロードするために、通常の<div>を使用あなたは今Dにデータを保存することができます

<%=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> 

お使いのコントローラで：フォームポストを経由して、モデルのEditorプロパティに戻ってそれをバインドするために、このようなものを使用コントローラーで

$(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."); 
        }       
       }); 
     }); 
    }); 

：ここ

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

Answer 2

atabase最新技術（レイザー/ MVC /アヤックス）を使用したソリューションである

[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

これは私がそれをやってしまった方法です剃刀の眺め

@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> 

私の意見トラッカー追加/編集方法

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