我试图通过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. 在pack / 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" ad然后将您的代码段更改为：

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

你准备好了。