我通过从https://github.com/DMPRoadmap/roadmap克隆代码来启动我的应用程序
本项目使用了webpack和npm。
我想使用select2,所以我在它的lib/assets
目录中使用了npm install select 2
我想要向我的项目详细信息页面(即app/views/plans/_edit_details.html.erb
)添加一个多选搜索字段,所以我添加了如下代码:
<%= f.select(:my_options,
options_for_select({first_option: '123'}, ['123']),
{},
{ id: 'select-field',
class: 'form-control',
multiple: 'multiple' }) %>
并将以下内容添加到其相应的JavaScript文件(即lib/assets/javascripts/views/plans/edit_details.js
)中:
// Set up Select2 for the multi select search field
$('#select-field').select2({
placeholder: 'Please enter text',
});
还有这些,因为webpack需要知道我需要的代码:
import 'select2/dist/js/select2';
import 'select2/dist/css/select2.css';
这个项目只使用sass吗?所以我在webpack的配置(lib/assets/webpack.config.js
)中添加了css loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
// above is old code, below is new code
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
现在(在我添加了新的css加载器之后),多选搜索工作了,但应用程序中的tinymce文本区域框突然不再工作了。
我不知道为什么会发生这种情况,也不知道从哪里开始调试。我哪里做错了?
谢谢!
发布于 2019-03-27 09:01:19
在app/views/plans/_edit_details.html.erb
文件中,我需要添加以下两行:
import 'jquery-ui/ui/widgets/autocomplete';
import 'select2';
而不是:
import 'select2/dist/js/select2';
import 'select2/dist/css/select2.css';
https://stackoverflow.com/questions/54000361
复制相似问题