在 Jquery .load onclick 之后将 TinyMCE 编辑器显示到文本区域

Question

我正在尝试将 TinyMCE WYSIWYG 编辑器添加到我的文本区域。

我有一个带有td 的表格，用户可以单击该表格来.load 一个带有输入字段、标签、文本区域等的表格。

我的td 看起来像这样：

<a href="#" id="display_info" onclick="displayFacilityInformation(61)">Something</a>

displayFacilityInformation() 看起来像这样：

function displayFacilityInformation (facID){
    $("#facility_details").load("facilitydetails.php?q="+facID);
    $('#facility_details_wrapper').show();
    $("#newaccount_form, #newuser_form, #newfacility_form, #accounts, #facilities, #new_section_form").hide(); //hide other divs

    //tinymce.EditorManager.execCommand('mceAddEditor',true, general_facility_info); //gave me console error "general_facility_info is undefined")

    //tinyMCE.execCommand('mceAddEditor', true, 'general_facility_info');

    //tinymce.init({
        //selector: "textarea"
    //});

    //tinyMCE.execCommand('mceAddEditor', true, 'body');
};

我尝试过的各种东西都被注释掉了。 （general_facility_info 是其中一个文本区域的 ID）

facilitydetails.php 将 HTML 表单输出到 div id="facility_details"，其中包含我希望成为 tinyMCE 编辑器的文本区域。

我的控制台没有抛出任何错误，我可以创建其他文本区域，这些文本区域是其他（隐藏）形式的 tinymce 编辑器。

是否与使用 Jquery .load 添加元素有关？

如何制作新添加的textarea的tinyMCE编辑器？

Answer 1

您正在异步加载此数据。当 load 函数完成运行时，您需要运行 init 方法作为回调，否则它会在 textareas 可能加载之前运行并且没有任何反应。

查看我链接到的文档，其中第三个可选参数是：

完成 类型：函数（字符串 responseText，字符串 textStatus，jqXHR jqXHR） 请求完成时执行的回调函数。

所以你的方法应该看起来更像：

function displayFacilityInformation (facID){
    $("#facility_details").load("facilitydetails.php?q="+facID, function() {
        $('#facility_details_wrapper').show();
        $("#newaccount_form, #newuser_form, #newfacility_form, #accounts, #facilities, #new_section_form").hide(); //hide other divs

        tinymce.init({
            selector: "textarea"
        });
    });
};