Tinymce文本编辑器在bootstrap模态窗口上不起作用

I'm using tinymce text editor in my project it's working properly in the main window but when i try to load bootstrap modal the simple textarea appears and there's no Tinymce's option. Here's my site and login info: hmodelschool.co.nf, email: [e-mail] pass: 1234 In the news section you'll see the tinymce option comes properly. but when i try to edit with bootstrap modal tinymce's option doesn't come. wht to do. Here my code i'm using. in include.top.php i'm loading tinymce from cdn.

我正在我的项目中使用tinymce文本编辑器它在主窗口中正常工作但是当我尝试加载bootstrap模式时,简单的textarea出现并且没有Tinymce的选项。这是我的网站和登录信息:hmodelschool.co.nf,电子邮件:[e-mail]传递:1234在新闻部分,您将看到tinymce选项正确。但是当我尝试使用bootstrap modal编辑时,tinymce的选项不会来。该做什么。这是我正在使用的代码。在include.top.php我正在从cdn加载tinymce。

  <!--tinymce text editor-->
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script>tinymce.init({
  selector: 'textarea',
  height: 300,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor 
    pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu   
    directionality',
    'emoticons template paste textcolor colorpicker textpattern 
     imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | 
   alignleft aligncenter alignright alignjustify | bullist numlist 
   outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  });</script>

in main page news.php i'm calling it with:

在主页news.php我用它调用它:

   <div class="form-group"> 
    <label class="col-sm-3 control-label">
    <?php  echo get_phrase('news');?></label> <div class="col-sm-5"> 
   <div class="box closable-chat-box"> <div class="box-content padded"> 
   <div class="chat-message-box"> <textarea name="news" id="ttt" 
    rows="5" placeholder="<?php echo get_phrase('add_news');?>" 
   class="form-control"></textarea> </div>   
  </div> 
   </div> 
  </div>
  </div>

and also in modal_edit_news.php i'm calling it with:

而且在modal_edit_news.php我用它调用它:

   <div class="form-group"> 
    <label class="col-sm-3 control-label">
    <?php  echo get_phrase('news');?></label> <div class="col-sm-5"> 
   <div class="box closable-chat-box"> <div class="box-content padded"> 
   <div class="chat-message-box"> <textarea name="news" id="ttt" 
    rows="5" placeholder="<?php echo get_phrase('add_news');?>" 
   class="form-control"></textarea> </div>   
  </div> 
   </div> 
  </div>
  </div>

And the tinymce doesn't just work on bootstrap modal. Any help would be greatly appreciated.

而tinymce不仅适用于bootstrap模式。任何帮助将不胜感激。

1 个解决方案

#1

I had encountered a similar issue when loading a modal over an AJAX request. The workaround is to initialize the TinyMCE editor on loading the modal.

在AJAX请求上加载模态时遇到了类似的问题。解决方法是在加载模态时初始化TinyMCE编辑器。

$('#myModal').on('shown.bs.modal', function () {
  tinymce.init({
    selector: 'textarea',
    height: 300,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor 
      pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu   
      directionality',
      'emoticons template paste textcolor colorpicker textpattern 
       imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | 
     alignleft aligncenter alignright alignjustify | bullist numlist 
     outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true,
  });
})