Tinymce文本编辑器不能在bootstrap模式窗口上工作

时间:2016-04-14 11:08:03

标签: javascript jquery html twitter-bootstrap tinymce

我在我的项目中使用了tinymce文本编辑器它在主窗口中正常工作但是当我尝试加载bootstrap模式时,出现了简单的textarea并且没有Tinymce' s选项。 这是我的网站和登录信息:hmodelschool.co.nf,电子邮件:admin@example.com传递:1234 在新闻部分,您会看到tinymce选项正确无误。但是当我尝试使用bootstrap模态编辑时,选项并没有出现。该做什么。  我的代码在这里使用。 在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>

在主页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>

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

而且,这并不仅仅适用于bootstrap模式。 任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

在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,
  });
})