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有吗？

devServer: {
    port: 3000,
    writeToDisk: true,
    proxy: {
        '/': 'http://localhost:8080'
    }
}

Answer 2

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

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

如果您或其他任何人感兴趣，我写了一篇博客文章，介绍我最近添加QuillJS to Rails 6的经验，这可能有用。坦率地讲，该帖子没有详细介绍此特定问题，但是代码段确实解决了该问题，并且可以为更广泛的配置提供更多帮助。

Rails 6-Javascript：未捕获ReferenceError：未定义套管

2 个答案: