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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中相关的知识,希望对你有一定的参考价值。

我一直在尝试将Quill编辑器添加到我的应用程序,但它不起作用。

  1. 我用--webpack创建了一个Rails 5.1应用程序然后我运行了rails webpacker:install
  2. 我跑了yarn add quillrails 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

我做错了什么?

答案

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

另一答案
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'
});

你准备好了。

以上是关于我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中的主要内容,如果未能解决你的问题,请参考以下文章

通过webpack为Laravel添加时刻

试图将 redux 集成到 react 应用程序中。 Webpack 在 store.js 上令人窒息

通过 Webpack 将 CSS 样式注入到 shadow root

ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法(vue-cli-plugin-nativescript-vue)

Vue CLI 3将eval功能预先添加到自定义模板标签

使用 Quilljs 和 capybara-webkit 进行 Capybara 测试