TinyMCE: how to properly connect inside bootstrap dialog?

Question

TinyMCE

Hello! There is a pop-up dialog on bootstrap with a textarea field, inside - the text from the base.
In the html code, the code of the modal window is as follows:

<!-- Modal --> 
<div class="modal fade" id="add_new" tabindex="-1" role="dialog" aria-labelledby="Labelnew_new" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="Labelnew_new">Добавить новость</h4>
      </div>
      <div class="modal-body">
    <form role="form" id="f_new">
      <div class="form-group">
      <label for="ntitle">Заголовок :</label>
      <input type="text" class="form-control" name="ntitle" id="title" placeholder="Заголовок новости"	data-provide="typeahead" data-items="4" autocomlete="off"/>
      </div>
      <div class="form-group">
      <label for="ntext">Текст :</label>
            <textarea class="form-control" rows="9" name="ntext" id="ntext" placeholder="Текст новости"></textarea>
      <input type="hidden" name="id_new">
      </div>
    </form>
      </div>
      <div class="modal-footer" id="modal_footer">
    <button type="button" class="btn btn-primary" id="save_new">Сохранить изменения</button>
  <button type="button" class="btn btn-warning" id="f_del">Удалить</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Next, in the js code, the call to the modal window:

function set_new(){
 $('#new_new').on('click',function(){ jQuery('form')[0].reset();
 $('input[name="id_new"]').val('');
 });
 $('#table-new tbody').on('click','tr', function( event ){	
var tr = $( this );
var id = $( this ).attr('id');
$('input[name="id_new"]').val(id);
$("input[name='ntitle']").val( tr.find('td:eq(1)').text());
$("textarea[name='ntext']").val(tr.find('td:eq(2)').html()); 
$("#add_new").modal('show'); 
});
  
}

If you do not connect tynimce, then everything works and the textarea is filled, but if you connect the tinimce plugin in the html file:

<script src="/admin/template/news/tinymce/js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({ 
selector: '#ntext',
  height: 200,
  language:"ru",
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
  });
  
  </script>

then it is displayed normally, all icons etc., but the problem is that the content of the textarea stops displaying, it's just empty there. Please tell me how to fix this problem?

Answer 1

Show me the code and I can tell you something specific, what, where and how ...

Answer 2

In the html code, the code for the modal window is as follows:

<!-- Modal --> 
<div class="modal fade" id="add_new" tabindex="-1" role="dialog" aria-labelledby="Labelnew_new" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="Labelnew_new">Добавить новость</h4>
      </div>
      <div class="modal-body">
    <form role="form" id="f_new">
      <div class="form-group">
      <label for="ntitle">Заголовок :</label>
      <input type="text" class="form-control" name="ntitle" id="title" placeholder="Заголовок новости"	data-provide="typeahead" data-items="4" autocomlete="off"/>
      </div>
      <div class="form-group">
      <label for="ntext">Текст :</label>
            <textarea class="form-control" rows="9" name="ntext" id="ntext" placeholder="Текст новости"></textarea>
      <input type="hidden" name="id_new">
      </div>
    </form>
      </div>
      <div class="modal-footer" id="modal_footer">
    <button type="button" class="btn btn-primary" id="save_new">Сохранить изменения</button>
  <button type="button" class="btn btn-warning" id="f_del">Удалить</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Next, in the js code, the call to the modal window:

function set_new(){
 $('#new_new').on('click',function(){ jQuery('form')[0].reset();
 $('input[name="id_new"]').val('');
 });
 $('#table-new tbody').on('click','tr', function( event ){	
var tr = $( this );
var id = $( this ).attr('id');
$('input[name="id_new"]').val(id);
$("input[name='ntitle']").val( tr.find('td:eq(1)').text());
$("textarea[name='ntext']").val(tr.find('td:eq(2)').html()); 
$("#add_new").modal('show'); 
});
  
}

If you do not connect tynimce, then everything works and the textarea is filled, but if you connect the tinimce plugin in the html file:

<script src="/admin/template/news/tinymce/js/tinymce/tinymce.min.js"></script>
  <script>tinymce.init({ 
selector: '#ntext',
  height: 200,
  language:"ru",
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
  });
  
  </script>

Then it is displayed normally, all the icons, etc., but the problem is that the content of the textarea stops being displayed, it's just empty there