httpget中的TinyMCE检索了Bootstrap模态

时间:2015-11-19 17:55:38

标签: javascript c# jquery html twitter-bootstrap

我想在我的网站上编辑一个对象。我点击一个按钮然后打开模态。在点击和模态显示之间,完全检索对象并将其提供给模态的局部视图。

但是,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">&times;</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上工作。

0 个答案:

没有答案