TineMCE 不会启动 ajax 加载的文本区域

TineMCE doesn't initiate ajax-loaded textarea

本文关键字：文本 区域 加载 ajax 启动 TineMCE      更新时间：2023-09-26

我使用 $.ajax（） 将这段 html 加载到div 中

<div class="board-container">
    <form method="post" action="functions.php">
        <input type="hidden" name="function" value="set_boards">
        <div class="row-fluid">
            <div class="span6">
                <h3 class="dark">Student Board</h3>
                <textarea id="board_students" name="board_students">
                </textarea>
                <br>
            </div>
            <div class="span6">
                <h3 class="dark">Instructor Board</h3>
                <textarea id="board_instructors" name="board_instructors">
                </textarea>
                <br>
            </div>
        </div>
        <a href="#" class="btn btn-inverse btn-large btn-center">Update Boards</a>
    </form>
</div>
<script src="libs/tinymce/tinymce.min.js"></script>
<script src="js/board.js"></script>

在电路板.js中，只有一个TinyMCE启动功能。

$(function()
{
    tinymce.init({
        menubar : false,
        height: 700,
        selector: "#board_students"
    });
});

ready（） 函数应该由于 ajax 请求而自动调用。我已经用警报进行了测试，我知道该函数被调用了。
如果 html 默认在div 中，则代码有效，但是当通过 ajax 加载时，没有任何反应。为什么？

发生这种情况是因为您的 ajax 异步加载内容，而您的小初始化函数是同步发生的，可能是初始化发生在内容放入您的 dom 之前。另一件事是你不应该在 html 数据中加载脚本。为了解决这个问题

如果要加载脚本异步意味着您必须使用js创建脚本标签元素，例如

    var jsonp = document.createElement("script");
    jsonp.type = "text/javascript";
    jsonp.src = "libs/tinymce/tinymce.min.js";
    document.getElementsByTagName("body")[0].appendChild(jsonp);

或者您可以在页面本身中包含tinymce.min.js并在加载内容后初始化div，例如

$.ajax({
         url: url,
         type: type,
         data: data,
         success: function(htmlData){
              $('#DivId').append(htmlData);
              //here internalize tiny mice when its available in dom   
              tinymce.init({
                 menubar : false,
                 height: 700,
                 selector: "#board_students"
              });
         }
   });

试试这个，让我知道这是否有效... !!

发生这种情况

的原因是，ajax 在 --page load 之后添加您的内容--. 因此，它不会读取代码并将其添加到 DOM，因为您是在页面加载后添加此代码的。

正如许多人所说，您可以预加载此信息，或者如果您想使用 AJAX。

初始化代码的最简单方法是在 ajax 调用结束时添加一个 .complete 函数。 这表示当 ajax 函数完成运行时，继续此操作。 

$.ajax({
  type: "POST", #GET/POST
  url: "some.url",
  data: {}
})
.complete(function() {
    tinymce.init({
    menubar : false,
    height: 700,
    selector: "#board_students"
  }
});

Jquery Ajax Call

您案例中的<script>块将在同一时刻异步开始执行，仅仅因为 tinymce 是最大的脚本，tinymce.init就会失败。

您需要将脚本加载为 ajax 调用的附加级联：

$.get(...., function (){// first level, getting the html
    $.getScript(...., function (){// second level, getting <script src="libs/tinymce/tinymce.min.js"></script>
         // executing or loading js/board.js 
    });
});
相关文章：