Как использовать ACE с моим приложением ASP.NET MVC?
-
27-10-2019 - |
Вопрос
Я хочу использовать ТУЗ Редактор онлайн -кода в моем проекте. Как мне использовать его в ASP.NET MVC?
Я хотел бы сохранить все, что сделано с этим редактором в базе данных. Как я могу это сделать?
Решение
Давайте предположим Editor
с данными в нем. Теперь используйте нормальный <div>
Чтобы загрузить данные:
<div id="editor"><%=Model.Editor %></div>
Теперь вы можете создать редактор ACE вместо 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
}
Вот как я в итоге сделал это в бритвах
@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>
В моем методе Add/Edit
[HttpPost]
[ValidateInput(false)]
public ActionResult AddEdit(Article article, FormCollection formCollection)
{
article.CompanyId = OperatingUser.CompanyId;
article.CascadingStyles = article.CascadingStylesHdn;
article.JavaScript = article.JavaScriptHdn;