我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中

Question

我一直在尝试将Quill编辑器添加到我的应用中，但它无法正常工作。

1. 我使用--webpack创建了一个Rails 5.1应用，然后运行了rails webpacker:install
2. 我跑了yarn add quill和rails webpacker:compile
3. 我将<%= javascript_pack_tag 'application' %>添加到 layouts / application.html.erb

4. 在 packs / application.js 中我有：

   import Quill from 'quill';

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

5. 在 _form.html.erb ：

   <%= form.text_field :content, id: :article_content %>

6. 我运行了rails s和.bin/webpack-dev-server

7. 在控制台中我收到错误：quill Invalid Quill container #article_content

我做错了什么？

Answer 1

不清楚何时包含_form.html.erb但该错误意味着在运行new Quill时，页面上没有与输入查询匹配的DOM元素。特别针对您的情况，这意味着页面上没有元素具有ID article_content。

Answer 2

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

您不能在此处使用CSS ID选择器，只能使用类。因此，将id="article_content"更改为class="article_content"广告，然后将您的代码段更改为：

var quill = new Quill('.article_content', {
  theme: 'snow'
});

您就可以出发了。

Answer 3

我假设您也在使用Turbolinks。您需要确保将以下脚本包装为：

sudo apt-get install python3.7-dev

这为我解决了问题