我想在我的网站上编辑一个对象。我点击一个按钮然后打开模态。在点击和模态显示之间,完全检索对象并将其提供给模态的局部视图。
但是,TinyMCE不适用于此模式。它适用于我使用的每个其他模态(不使用任何HttpGet功能)。
第一页视图(我可以点击编辑等。我省略了一些不相关的代码。)
<link rel="stylesheet" href="/content/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script src="/content/js/bootstrap.min.js"></script>
<script src="/content/tinymce/tinymce.js"></script>
<button type="button" class="btn btn-default edit-button" data-id="@Model[i].id">Edit</button>
<div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id="edit-container"></div>
</div>
</div>
</div>
单击按钮时调用的jQuery函数
$('.edit-button').click(function () {
var url = "/Admin/Edit"; // the url to the controller
var id = $(this).attr('data-id'); // the id that's given to each button in the list
$.get(url + '/' + id, function (data) {
$('#edit-container').html(data);
$('#edit-modal').modal('show');
});
});
最后的模态:
@model project.Models.Object
<script>tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
@using (Html.BeginForm("Edit", "Admin", FormMethod.Post))
{
<div class="modal-body">
<div class="form-group form-group-lg ">
<label for="ex2">Titel:</label>
@Html.TextBoxFor(model => model.Title, new { @class= "form-control input-lg"})
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="form-group form-group-lg ">
<label for="ex2">Beschrijving:</label>
@Html.TextAreaFor(model => Model.Description, new { @class= "form-control input-lg"})
@Html.ValidationMessageFor(model => model.Description)
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" >Opslaan</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
}
所以问题基本上就是tinceMCE编辑器没有在那个textarea上工作。