在没有 webpack 的情况下使用 ActionText

Question

我尝试在 Rails 6 上使用旧方式资产管道（没有 Webpack）来实现 ActionTest

几乎一切都很好，除了加载@rails/actiontext

在我的 application.js 中我有

//= require trix
//= require @rails/actiontext

Riche编辑器出现，我可以更改粗体/斜体文本，但无法添加图像（未上传）

我有一个 JS 错误：未捕获的语法错误：无法在模块外使用 import 语句

在线：从actiontext中的attachment_uplaod.js的“./attachment_upload”导入{AttachmentUpload}。

没有 webpack 有什么方法可以实现这一点吗？

谢谢

Answer 1

我不知道官方的方式是什么，但我这样做是因为我正在等待更新的安装生成器：

\n

先决条件

\n

\n
• 热线导轨
\n

\n

CSS

\n

\n
• 将 CSS 文件复制到资产管道中 ( https://github.com/basecamp/trix/tree/main/dist )
\n

\n

JS 库

\n

\n
• 在app/assets/javascripts/libraries创建这两个文件
\n
• 更新的内容可以在https://www.skypack.dev上找到
\n

\n

// app/assets/javascripts/libraries/actiontext@6.1.4.js\nexport * from \'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports/optimized/@rails/actiontext.js\';\nexport { default } from \'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports,min/optimized/@rails/actiontext.js\';\n

\n

// app/assets/javascripts/libraries/trix@1.3.1.js\nexport * from \'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports/optimized/trix.js\';\nexport { default } from \'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports,min/optimized/trix.js\';\n

\n

通过刺激进口

\n

\n
• 在app/assets/javascripts/controllers创建这个文件
\n

\n

//app/assets/javascripts/controllers/trix_controller.js\nimport { Controller } from "stimulus"\n\nexport default class extends Controller {\n  connect() {\n    import("actiontext").catch(err => null)\n    import("trix").catch(err => null)\n  }\n}\n

\n

\n
• 在应加载 trix/action_text 的页面上，将 a 添加data-controller="trix"到相关 div
\n
• 瞧\xc3\xa0！
\n

\n

https://github.com/rails/rails/issues/41221#issuecomment-871853505

\n