为啥tinymce没有出现在动态添加的文本区域

Posted 2023-02-24

【中文标题】为啥tinymce没有出现在动态添加的文本区域

【英文标题】：why is tinymce not showing up on a dynamically added text area为什么tinymce没有出现在动态添加的文本区域

【发布时间】：2016-09-21 04:52:39

【问题描述】：

最近，我使用 jquery、php 和 mysql 完成了我的一个项目的无限滚动。创建之后，我面临 tinymce 编辑器未绑定到动态生成的文本区域的问题。我该怎么办？这是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中使用无限滚动功能时动态生成textarea的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.'"  > '.$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();

    );

【问题讨论】：

你只需检查 id "wall_edit_1" 在 DOM 中是唯一的

@AnishChandran 我将 id 更改为动态的仍然无法正常工作:(

@srivastava 关于这个兄弟的任何想法

检查 tinymce.init 代码 "selector: "textarea#wall_edit_1" ，这里你指定静态 id 不是动态的

欢呼我这次做对了。 @AnishChandran

【参考方案1】：

尽量选择 CSS 类而不是 ID， 或者您可以将生成的 id 更改为 select。

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

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