javascript - 为什么 tinymce 没有出现在动态添加的文本区域

Question

伙计们，最近我使用 jquery、php 和 mysql 完成了对我的一个项目的无限滚动。创建后，我面临 tinymce 编辑器未绑定(bind)到动态生成的文本区域的问题。我应该怎么办？这是 tinymce 编辑器的代码:

    tinymce.init({
    menubar:false,
    forced_root_block : "",
    selector: "textarea#wall_edit_1",
     entities : '160,nbsp,162,cent,8364,euro,163,pound',
    theme: "modern",
    resize: false,
    height: 200,
    plugins: [
         " autolink link image preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage |  emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
      //  {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Header', block: 'h1'},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
    });

这是在使用 jquery 中的无限滚动功能时动态生成文本区域的 php 代码:

if ($author==$_SESSION['uname'] || $account_name==$_SESSION['uname']) {
                $statusdeletebutton='<li>'
                           . '<a  type="'.$updateid.'" class="btn delete_4_session hidden_text_delete_'.$updateid.' glyphicon glyphicon-trash delete_status_btn" title="Delete this status and its replies">Remove</a></li>';
                $edit_btn='<li>'
                        . '<a attr="'.$updateid.'" type="'.$updateid.'" class="btn edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li>';
                $statusui_edit="<div type='".$updateid."' class='hidden_edit_4_session session_editor".$updateid." jumbotron'>"
            . "<a type='".$updateid."' class='btn pull-right close_edit' title='Close without editing'>Close X</a>"
            . "<input type='text' class='form-control title_s_edit title_s_".$updateid."' name='status_title' value='".html_entity_decode($title)."' placeholder='Title' >"
            . "<span>&nbsp;</span>"
            . "<textarea id='wall_edit_1' type='".$updateid."' rows='5' cols='50'  class='session_edit text_value_".$updateid."' wrap='hard' placeholder='whats up ".$session_uname."'>
             ".html_entity_decode($data1)."</textarea><br>"
            . "<button style='float:right;' value='".$updateid."' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div>" ;

                }else{
                    $statusdeletebutton="";
                    $edit_btn="<li class='posted'>You are not the owner of this Post</li>";
                    $statusui_edit="";
                }

       echo $statusui_edit.''. $hidden_text.'<div attr="'.$updateid.'" type="'.$updateid.'" class="statusboxes status_'.$updateid.'  jumbotron">'
                        . '<h3 class="pull-left title">'
                        . '<div id="'.$updateid.'" class="title_s_2copy posted" value="'.html_entity_decode($title).'">'.html_entity_decode($title).'</div></h3>'
                        . '<span class="pull-right">'
                        . '<div class="dropdown">'
                        . '<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"  >'
                        . '<span class="glyphicon glyphicon-edit"></span></button>'
                        . '<ul class="dropdown-menu">'
                         .$edit_btn .' '. $statusdeletebutton .'</ul></div></span><br><hr>'
                        . '<legend><span style="font-size: 13.5px;" class=" data_s_2copy" type="'.$updateid.'" >'
                        . html_entity_decode($data1).'</span></legend><b class="posted"><small>Posted by:-  <a href="home.php?u='.$author.'"><img src="'.$feed_pic.'" height="20px" width="20px"> '.$author.   '</a>   '.$datemade.'</small></b>'
                        . '<br><legend>'.$like.' | '.$unlike. ' | '.$share_button.'<h4><a id="'.$updateid.'" class="btn collap-btn">Comments</a></h4></legend>';

这是我在 jquery 中初始化它的地方:

 $(document).on("click",".hidden_text_edit",function(){
    var id=$(this).attr("type");

    $(".session_editor"+id).removeClass("hide");
    $(".session_editor"+id).show(function(){
        tinymce.init({
    menubar:false,
    forced_root_block : "",
    selector: "textarea#wall_edit_1",
     entities : '160,nbsp,162,cent,8364,euro,163,pound',
    theme: "modern",
    resize: false,
    height: 200,
    plugins: [
         " autolink link image preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage |  emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
      //  {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Header', block: 'h1'},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
    });
    });

    $(".status_"+id).hide();

    });

Answer 1

尝试选择 CSS 类而不是 ID，或者您可以更改生成的 ID 以进行选择。

tinymce.init({
    selector: '.mytextarea',
    plugins: 'a11ychecker advcode.....all plugins goes here.
});

我也没有找到一个简单的 TinyMCE 函数可以在需要时直接调用。我们只需要再次调用所有内容，如果我们过去也这样做的话。