¿Cómo uso ACE con mi aplicación ASP.NET MVC?

Question

Quiero usar el editor de código en línea ACE en mi proyecto. ¿Cómo lo uso en ASP.NET MVC?

Me gustaría guardar las ediciones realizadas con ese editor en la base de datos. ¿Cómo puedo hacer eso?

Answer 1

Supongamos que tiene un fuerte modelo mecanografiado con una propiedad llamada Editor con los datos que contiene. Ahora usa una normal de <div> para cargar los datos:

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

Ahora puede crear un editor as en lugar de la div con javascript:

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

ahora cuando se quiere guardar los datos, por ejemplo, a través de un puesto de formulario, utilice algo como esto para unirse de nuevo a la propiedad Editor del modelo:

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

En el controlador ahora puede guardar los datos en el d atabase

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

Answer 2

Aquí es una solución utilizando tecnologías más recientes (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."); 
        }       
       }); 
     }); 
    }); 

En Controlador:

[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

Esto es como terminé haciéndolo en Razor Vistas

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

En mi estafa Troller Agregar/Editar Método

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