Rails 6 - Javascript：未捕获的 ReferenceError：未定义 Quill

Question

我正在尝试在 Rails 6 应用程序上设置 Quill。 当我将 js 文件放入 html 中时，它可以工作，它看起来像这样： new.html.erb

<div id="editor">
  <p>Hello World!</p>
</div>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

但是，当我尝试运行本地 js 文件时，它给了我一个错误

Uncaught ReferenceError: Quill is not defined
    at Object../app/javascript/src/editor.js (editor.js:1)

这是我的 application.js 文件

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("src/quill.js")
require("src/editor.js")

这是我的 editor.js 文件

var quill = new Quill('#editor', {
      theme: 'snow'
    });

quilljs 是整个库文件。

我的 application.html.erb 也有这个标签

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

两个 js 文件都会加载，因为我可以看到我在控制台中设置的 console.log 值。 我不确定我做错了什么，似乎没有人有类似的问题。

Answer 1

你的asset.rb 有吗？

Rails.application.config.assets.precompile += %w( application.js )

Answer 2

在创建 Quill 实例之前，您可能只需要等待 DOM 加载。 这个问题是去年提出的，所以希望你已经找到了解决方案。 如果没有，你可以尝试这样的事情：

document.addEventListener("DOMContentLoaded", function (event) {
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
});

如果您或其他任何人感兴趣，我写了一篇关于我最近将QuillJS 添加到 Rails 6的经验的博客文章，这可能会有用。 诚然，这篇文章并没有 go 详细介绍这个特定问题，但代码片段确实解决了这个问题，并且可以为更一般的配置提供更多帮助。