首页 > 解决方案 > 将 TinyMCE 升级到 5,一种形式不会在 textarea 控件上显示编辑器

问题描述

我正在使用 Bootstrap 4.5,并且有几种形式都使用完全相同的设置来调用 TinyMCE 5,但是一种形式(当然是最复杂的)没有显示出来。我找不到任何错误,或者 textarea 控件的创建方式有什么不同。加载 TinyMCE 的代码是在 PHP 程序中加载的,因此在所有情况下都是相同的。这是流出的代码:

  <!-- Jquery -- required for interactive parts of bootstrap and other code to function -->
  <script src="../../Awards/jscode/jquery.min.js"></script>
  <!-- Bootstrap core JavaScript, popper.js required for tooltips and such -->
  <script src="../../Awards/jscode/popper.min.js"></script>
  <script src="../../Awards/jscode/bootstrap.js"></script>
  <!-- TinyMCE -->
  <script src="../../Awards/jscode/tinymce/tinymce.min.js"></script>
  
  <script language="JavaScript">
     // TinyMCE, set for all textarea controls, with specific toolbar items, no menubar, etc.:
     tinymce.init(
     {
        selector: 'textarea',
        menubar: false,
        branding: false,
        plugins: 'code lists',
        toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code',
        lists_indent_on_tab: true,
        content_css: '<?php echo $Award_html_RootPath; ?>css/AwardList.css'
     }); // end of TinyMCE code
  </script>

这适用于其他表单,每个表单都有相同的代码。我很困惑为什么这个表格不显示 TinyMCE。有问题的文本区域控件是:

<div class="form-group">
     <textarea name="Notes" id="Notes"
               class="form-control"
               style="height: 250px;"></textarea>
</div> <!-- / form-group -->

提前感谢您提供任何可能指出问题所在的建议。这个表单有很多 JavaScript,但似乎一切正常,只是不想加载 TinyMCE 代码......它显示为标准文本区域,没有 TinyMCE 覆盖。

标签: tinymce-5

解决方案


好吧,所以现在我觉得很害羞。在正确加载标题信息之前,我在页面顶部输出了一些样式,因此 TinyMCE 没有看到“标准”模式,其中包括 HTML 文件的第一行需要:

<!DOCTYPE HTML>

将脚本标签移动到将标题流式传输到页面的代码下方,以便除其他外,上面的 doctype 标签是第一行,一切都很好。很抱歉在这件事上浪费了任何人的时间。


推荐阅读