TinyMCE: как правильно подключить внутрь диалогового окна bootstrap?

Question

[ZaurK]

Здравствуйте! Есть всплывающее диалоговое окно на bootstrap с полем textarea , внутри - текст из базы,
В html коде код модального окна такой:

<!-- 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>

Далее в js-коде вызов модального окна:

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

Если не подключать tynimce то все работает и textarea заполнен, но если подключить плагин tinimce в html файле:

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

то он нормально отображается, все значки и т.д., но проблема в том, что содержимое textarea перестает отображаться, там просто пусто. Подскажите пожалуйста, как устранить эту проблему?

Answer 1

[Владимир Сергеевич]

Покажи код и смогу тебе что-нибудь конкретное подсказать, что, где и как...

Answer 2

[ZaurK]

В html коде код модального окна такой:

<!-- 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>

Далее в js-коде вызов модального окна:

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

Если не подключать tynimce то все работает и textarea заполнен, но если подключить плагин tinimce в html файле:

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

То он нормально отображается, все значки и т.д., но проблема в том, что содержимое textarea перестает отображаться, там просто пусто

Comments

[Serj-One]

Зачем дополнять вопрос в ответах? Отредактируйте сам вопрос.

[ZaurK]

Отредактировал вопрос, но этот ответ убрать не смог