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 詳細介紹這個特定問題，但代碼片段確實解決了這個問題，並且可以為更一般的配置提供更多幫助。