我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中相关的知识,希望对你有一定的参考价值。
我一直在尝试将Quill编辑器添加到我的应用程序,但它不起作用。
- 我用
--webpack
创建了一个Rails 5.1应用程序然后我运行了rails webpacker:install
- 我跑了
yarn add quill
和rails webpacker:compile
- 我将
<%= javascript_pack_tag 'application' %>
添加到layouts / application.html.erb - 在pack / application.js中我有:
import Quill from 'quill';
var quill = new Quill('#article_content', { theme: 'snow' });
- 在_form.html.erb中:
<%= form.text_field :content, id: :article_content %>
- 我跑了
rails s
和.bin/webpack-dev-server
- 在控制台我得到一个错误:
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应用程序中的主要内容,如果未能解决你的问题,请参考以下文章
试图将 redux 集成到 react 应用程序中。 Webpack 在 store.js 上令人窒息
通过 Webpack 将 CSS 样式注入到 shadow root
ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法(vue-cli-plugin-nativescript-vue)