首页 / 技术问答 / Ruby-on-rails问答列表 / 问答详情

Rubyonrails Rails引擎importmap Uncaught ReferenceError：未定义tinymce

我在rails 7.1引擎中使用带有tinymce下载版本的Importmap.我无法显示编辑器，浏览器控制台显示以下错误

    Uncaught ReferenceError: tinymce is not defined
    <anonymous> http://localhost:3000/admin_dashboard/page_maintenance/something-new/edit:128
edit:128:11

我已经将本地tinymce Java脚本文件固定在portmap.rb中，而我的portmap.rb具有以下代码

pin "ccs_cms/custom_page/application"

#pin "ccs_cms/custom_page/sortable"
pin "ccs_cms/custom_page/nested_fields/addFields"
pin "ccs_cms/custom_page/nested_fields/removeFields"
#pin "jquery", to: "jquery-3.6.0.min.js"
#pin "jquery-ui", to: "jquery-ui.min.js"
pin "ccs_cms/custom_page/tinymce/tinymce.min"

JQuery和jQuery被注释掉，因为它们也失败，并出现$is Not Defined错误. 在相同的视图中，添加和删除字段的javascrip功能可以正常工作，因此我知道我已经正确设置了导入映射配置

我的视图包含以下代码

<% content_for :admin_import_maps do %>
  <%#= javascript_import_module_tag 'ccs_cms/custom_page/application' %>
  <%= javascript_import_module_tag 'ccs_cms/custom_page/tinymce/tinymce.min' %>
  <%= javascript_import_module_tag 'ccs_cms/custom_page/nested_fields/addFields' %>
  <%= javascript_import_module_tag 'ccs_cms/custom_page/nested_fields/removeFields' %>
<% end %>

这将生成以下head html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Admin dashboard</title>
  <meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="SXef8TuH8fgvCsoc1jkl2molUHoNIU50nKKrTC484SCWH_F2y54y1zEaSxNdHz5g-NJdWlv5Xm8pSKki-zmmuQ">
  
  <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "ccs_cms/custom_page/application": "/assets/ccs_cms/custom_page/application-99668eaf7a77ddf69599e88d13e2ec298da4543391fb6625b3a97c3da1c19e5d.js",
    "ccs_cms/custom_page/nested_fields/addFields": "/assets/ccs_cms/custom_page/nested_fields/addFields-1a38ed3d39bbaa916c45bc7718670854ac99e783836600003446abdd2bffc4b7.js",
    "ccs_cms/custom_page/nested_fields/removeFields": "/assets/ccs_cms/custom_page/nested_fields/removeFields-62e34f17e460cd64712cf6e34f576e56147ec1711d5bf13e0b5eecf86ce5b491.js",
    "ccs_cms/custom_page/tinymce/tinymce.min": "/assets/ccs_cms/custom_page/tinymce/tinymce.min-4ee986c9ca92871e240ef08a8b307c58edd8f9794494fa88553f26de181d98e0.js"
  }
}</script>

<script src="/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
    <script type="module">import "ccs_cms/custom_page/tinymce/tinymce.min"</script>
  <script type="module">import "ccs_cms/custom_page/nested_fields/addFields"</script>
  
  </head>

在我看来，在tinymce.min.js文件中包含了导入映射，也包含了模块

应该显示tinymce编辑器的视图部分具有以下代码

  <section>
    <fieldset>
      <legend> Page Section </legend>
      <%= form.hidden_field :_destroy %>

      <fieldset>
        <legend> Menu </legend>

        <div class="cms-admin-field">
          <%= form.label :content %>:
          <%= form.text_area :content %>
        </div>

        <script>
          tinymce.init({
            selector: 'textarea',
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
            mergetags_list: [
              { value: 'First.Name', title: 'First Name' },
              { value: 'Email', title: 'Email' },
            ],
          });
        </script>

这将生成以下html

<section>
    <fieldset>
      <legend> Page Section </legend>
      <input autocomplete="off" type="hidden" value="false" name="menu_item[page_sections_attributes][0][_destroy]" id="menu_item_page_sections_attributes_0__destroy">

      <fieldset>
        <legend> Menu </legend>

        <div class="cms-admin-field">
          <label for="menu_item_page_sections_attributes_0_content">Content</label>:
          <textarea name="menu_item[page_sections_attributes][0][content]" id="menu_item_page_sections_attributes_0_content"></textarea>
        </div>

        <script>
          tinymce.init({
            selector: 'textarea',
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
            mergetags_list: [
              { value: 'First.Name', title: 'First Name' },
              { value: 'Email', title: 'Email' },
            ],
          });
        </script>


      <div class="cms-admin-field">
        <label for="menu_item_page_sections_attributes_0_collapsed_header_text">Collapsed header text</label>:
        <input editor="template classic type classic" type="text" value="" name="menu_item[page_sections_attributes][0][collapsed_header_text]" id="menu_item_page_sections_attributes_0_collapsed_header_text">
      </div>
      <div class="cms-admin-field">
        <label for="menu_item_page_sections_attributes_0_include_contact_form">Include contact form</label>:
        <input name="menu_item[page_sections_attributes][0][include_contact_form]" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="menu_item[page_sections_attributes][0][include_contact_form]" id="menu_item_page_sections_attributes_0_include_contact_form">
      </div>
      <div class="cms-admin-field">
        <label for="menu_item_page_sections_attributes_0_collapsible">Collapsible</label>:
        <input name="menu_item[page_sections_attributes][0][collapsible]" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="menu_item[page_sections_attributes][0][collapsible]" id="menu_item_page_sections_attributes_0_collapsible">
      </div>
      <div class="cms-admin-field">
        <label for="menu_item_page_sections_attributes_0_has_borders">Has borders</label>:
        <input name="menu_item[page_sections_attributes][0][has_borders]" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="menu_item[page_sections_attributes][0][has_borders]" id="menu_item_page_sections_attributes_0_has_borders">
      </div>
      <div class="cms-admin-field">
        <label for="menu_item_page_sections_attributes_0_full_width">Full width</label>:
        <input name="menu_item[page_sections_attributes][0][full_width]" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="menu_item[page_sections_attributes][0][full_width]" id="menu_item_page_sections_attributes_0_full_width">
      </div>
      <div>
        <a class="remove_fields" href="#">Remove</a>
      </div>
    </fieldset>
  </fieldset></section>

Tinymce.init行是错误的原因.

显然，我希望将init脚本移到一个.js文件中并导入，但在我可以使其工作之前，请暂时保持内联. 请问我错过了什么？

推荐答案

缺少type="module"个:

<script type="module">
  import "https://cdn.tiny.cloud/1/no-api-key/tinymce/6.7.0-30/tinymce.js"
</script>

<script type="module">
  console.log(tinymce)
</script>

首先执行常规脚本标记，并且尚未导入tinymce，模块脚本将被推迟并稍后运行:

<script type="module">
  console.log("second")
</script>

<script>
  console.log("first")
</script>

Ruby-on-rails相关问答推荐

如何在嵌套路由中使用Ruby on rails多态关联

Rails 6：强类型原始 SQL 查询返回数组类型

如何使用 Rails 3 / Rack 在没有 www 的情况下重定向？

向现有控制器添加操作(Ruby on Rails)

为 ActionMailer 渲染不同的视图(模板)

如何在 rails 中指定和验证枚举？

带有 Cucumber 和 rspec 的 BDD - 这什么时候是多余的？

如何从 Rails 路由中删除控制器名称？

运行多个 Rails Server 实例

Rails(或 Ruby)：Yes/No 而不是 True/False

是否可以在 Rails 集成测试或规范中指定用户代理？

Rails 3 中的猴子补丁

使用 AJAX 向 Rails 发送 Authenticity Token 的正确方法

Rails，设计认证，CSRF 问题

您将如何在 RoR 中创建类似 SO 或 Facebook 的通知系统？

Rails 4模块的未初始化常量

在rails国际化yml文件中传递变量

Sidekiq 在 docker-compose 上的 127.0.0.1：6379 (Errno：：ECONNREFUSED) 上连接到 Redis 时出错

如何跳过失败的迁移？ (耙分贝：迁移)

ActionMailer 在开发 Rails 4 中不发送邮件

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630