Я хочу использовать ACE редактор онлайн-кода в моем проекте. Как использовать его в ASP.NET MVC?
Я хотел бы сохранить все изменения, сделанные с помощью этого редактора в базе данных. Как это сделать?
Я хочу использовать ACE редактор онлайн-кода в моем проекте. Как использовать его в ASP.NET MVC?
Я хотел бы сохранить все изменения, сделанные с помощью этого редактора в базе данных. Как это сделать?
Предположим, что у вас есть сильная типизированная модель с свойством 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>
В вашем контроллере теперь вы можете сохранить данные в базе данных
[HttpPost]
public ActionResult Index (IndexModel model) {
var data = model.Editor;
// save data in database
}
Вот решение, использующее самые последние технологии (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
}
Вот как я это сделал в 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>
В моем методе добавления/редактирования контроллера
[HttpPost]
[ValidateInput(false)]
public ActionResult AddEdit(Article article, FormCollection formCollection)
{
article.CompanyId = OperatingUser.CompanyId;
article.CascadingStyles = article.CascadingStylesHdn;
article.JavaScript = article.JavaScriptHdn;