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

Question

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

データベース内のエディターで作成された編集を保存したいと思います。それ、どうやったら出来るの？

Answer 1

あなたが呼ばれるプロパティを含む強力なタイプモデルを持っていると仮定しましょう Editor データが入っています。次に、通常のものを使用します <div> データをロードするには：

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

これで、JavaScriptを使用してDIVの代わりにACEエディターを作成できます。

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

コントローラーでデータをデータベースに保存できるようになりました

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

Answer 2

これは、最新のテクノロジー（Razor/MVC/Ajax）を使用したソリューションです。

    $(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

これが私がラザービューでそれをすることになった方法です

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