Question

我当前正在运行一个带有占位符div的HTML模板，并且当用户在div内单击时，会弹出一个带有TinyMCE实例的模式。到目前为止一切顺利。

TinyMCE在这里可以添加文本/内容，然后单击一个按钮即可关闭模式并将内容以相同格式传递到占位符div。（想像用户查看静态页面的模板，他们想插入内容，因此模态允许他们使用TinyMCE进行插入，然后单击按钮以在“实时”模板中查看它）。

无论如何，这很好。问题是，如果您发现错误或错字并需要再次致电TinyMCE，它将无法正常工作。内容传递到div后，单击div时将不再触发模式。无论如何我都不是JavaScript专家，所以我可以肯定那方面是错的。

这是代码。一切都按预期工作，但我只需要保持单击div并加载模式以编辑TinyMCE中内容的动作即可：

<div class="row middle">
  <div class="col-lg-12 fullWidth">
    <div class="fullContent" style="background-color: white; height: 100%;">
      <div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="fullModal">Content Library:</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h3>Create your own content</h3>
              <form id="form-data3" method="post">
                <textarea class="original" id="mytextarea3" name="fullText"></textarea>
                <input type="submit" value="Save Content">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var $modalFull = $('#fullModal').modal({
    show: false
  });

  $('.fullWidth').on('click', function() {
    $modalFull.modal('show');
  });

  $(document).ready(function() {
    $("#form-data3").submit(function(e) {
      var content3 = tinymce.get("mytextarea3").getContent();

      $(".fullContent").html(content3);
      jQuery.noConflict();
      $('#fullModal').modal('hide');
      $('.modal-backdrop').remove();
      return false;
    });
  });
</script>

Answer 1

使用$(".fullContent").html(content3);，您将覆盖模式的标记。

将其放在div之外。

<div class="row middle">
  <div class="col-lg-12 fullWidth">
    <div class="fullContent" style="background-color: white; height: 100%;">

    </div>
  </div>
</div>

<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fullModal">Content Library:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <h3>Create your own content</h3>
        <form  id="form-data3" method="post">
          <textarea class="original" id="mytextarea3" name="fullText"></textarea>
          <input type="submit" value="Save Content">
        </form>
      </div>
    </div>
  </div>
</div>

TinyMCE处于模式，模式将数据传递给div后不会重新打开

1 个答案: