Jump to content

how to add a tinymce editor to a dynamically added textarea?


Recommended Posts

Guys recently i finished a infinite scroll to one of my projects using jquery, php and mysql. After creating that i face the problem of tinymce editor not binding to the dynamically generated textarea. What should i do?

here is the code for tinymce editor:

    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'}

here is the php code that dynamically generates the textarea while using the infinite scroll feature in jquery:

if ($author==$_SESSION['uname'] || $account_name==$_SESSION['uname']) {
                           . '<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>';
                        . '<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> </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."'>
            . "<button style='float:right;' value='".$updateid."' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div>" ;

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

       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>';
Link to comment
Share on other sites

  • 2 weeks later...

You need to re-initialise TinyMCE once the AJAX (I assume) response has come back from the server and you're finished putting the data into the DOM.


You will also want to fix up the ID, because you're going to have multiple <textarea> elements on the page with the same ID, which is invalid HTML, and could also mess with the initialisation of TinyMCE

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.