替换HTML后，TinyMCE文本区域被禁用无法重新初始化或设置内容

编程问答 2022-08-13

问题描述

我正在动态设置HTML之后尝试设置tinyMCE文本区域的内容。

链接到CodePen示例：https://codepen.io/xanabobana/pen/oNxwgzX

重新创建步骤：

  1. 点击+添加新闻文章
  2. 点击上传新图片
  3. 单击关闭 结果：TinyMCE文本区域被“禁用”，没有内容，您不能在其中单击

我尝试过动态地重新初始化和设置内容，但这没有用。这是我的代码：

    var newsModalHTML = $("#newsModalDiv").html();

  tinymce.init({
   selector: "#mytextarea",plugins: "image,link",tinycomments_mode: "embedded"
    });
//replace news modal with image modal when adding a new image
    $("#newImageButton").click(function() {
        newsModalHTML = $("#newsModalDiv").html();
        $("#newsModal").modal('toggle');
        $("#newFileModal").modal('toggle');
    });
    
//show the news modal when the file modal is closed
    $("#closeUploadFile").click(function() {
        $("#newsModalDiv").html(newsModalHTML);
         tinymce.EditorManager.editors = [];
         tinymce.init({
              selector: "#mytextarea",});
         tinymce.get("mytextarea").setContent("hello world");
        $("#newsModal").modal('toggle');
        $('#fldNewTitle').focus();
    });
<button type="button" data-toggle="modal" data-target="#newsModal">+Add News Article</button>

<!--hidden edit article div-->
 <div id="newsModalDiv" style="max-height:90%; overflow:scroll;">
 <div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Edit News Article</h4>
      </div>
      <div class="modal-body">
        <form> <textarea id="mytextarea" name="mytextarea">test text</textarea></form>
<button type="button" id="newImageButton">Upload New Image</button>
        
      </div>
      <div class="modal-footer">
        <span style="float:right"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="newArticleSubmit">Save</button></span></div>
      </div>
    </div>
  </div>
</div>
</div>

<!--hidden upload image div-->
<div id="newFileModalDiv">
 <div class="modal fade" id="newFileModal" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Upload a New Image</h4>
      </div>
      <div class="modal-body">
        <section class="col-md-12">
            <article>
                <p>Use this form to upload an image to the database for the current project.</p><br>
              
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeUploadFile">Close</button>
        <button type="button" class="btn btn-primary" id="submitNewFile">Upload Image</button>
      </div>
    </div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerytinymcetwitter-bootstrap