【问题标题】:Tinymce text editor doesn't work on bootstrap modal windowTinymce 文本编辑器在引导模式窗口上不起作用
【发布时间】:2016-08-05 21:35:15
【问题描述】:

我在我的项目中使用 tinymce 文本编辑器,它在主窗口中可以正常工作,但是当我尝试加载引导模式时,会出现简单的 textarea 并且没有 Tinymce 的选项。 这是我的网站和登录信息:hmodelschool.co.nf,电子邮件:admin@example.com 密码: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>

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

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

【问题讨论】:

    标签: javascript jquery html twitter-bootstrap tinymce


    【解决方案1】:

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

    【讨论】:

    • 请告诉我应该如何以及在哪里应用你的代码?感谢您的回复。
    • @Nirob 将您的 javascript 代码放入一个 .js 文件中,然后从您的页面加载它,就像您对 tinymce.min.js 文件所做的那样。
    • 抱歉,还是没有运气。
    猜你喜欢
    • 1970-01-01
    • 2015-12-10
    • 2017-06-02
    • 1970-01-01
    • 2015-07-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多