安装 gem (bootstrap-wysihtml5) 时，我是否必须手动移动 javascript 和 css 文件？答案

【问题标题】：When installing a gem (bootstrap-wysihtml5) do I have to manually move javascript and css files?安装 gem (bootstrap-wysihtml5) 时，我是否必须手动移动 javascript 和 css 文件？
【发布时间】：2013-12-22 19:09:09
【问题描述】：

我认为我错过了重要的一步：

安装gem（即bootstrap-wysihtml5）时，我应该采取哪些步骤才能正确查找和引用javascript和css文件。

我将 gem bootstrap-wysihtml5 添加到我的 gemfile，然后运行 bundle install。

我将//= require bootstrap-wysithtml5 放在application.js 中，将*= require bootstrap-wysithtml5 放在application.css 中。

我收到以下错误：

 Error compiling CSS asset

 Sprockets::File not found: couldnt find file 'bootstrap-wysihtml5.css'

我是否必须手动将 js 和 css 复制到相关的应用程序/资产文件中，或者我是否缺少关键步骤？

【问题讨论】：

根据文档，Rails 的 gem 是 bootstrap-wysihtml5-rails，而不是 bootstrap-wysihtml5。

标签： ruby-on-rails gem asset-pipeline bundler

【解决方案1】：

正如比利所说，正确的宝石是bootstrap-wysihtml5-rails。 gem 安装 JS/CSS 无需您进一步努力。

将此添加到您的Gemfile：
```
gem 'bootstrap-wysihtml5-rails'
```
将此添加到app/assets/javascripts/application.js：
```
//= require bootstrap-wysihtml5
```
将此添加到app/assets/stylesheets/application.css：
```
*= require bootstrap-wysihtml5
```

请注意，bootstrap-wysihtml5-rails 需要 Bootstrap。如果您尚未将 Bootstrap 添加到您的项目中，请关注此 gem 的创建者的 these steps：

在Gemfile 中，添加以下内容：

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

将app/assets/stylesheets/application.css 重命名为app/assets/stylesheets/application.css.scss
将以下内容添加到app/assets/stylesheets/application.css.scss：
```
@import "twitter/bootstrap";
```
将以下内容添加到app/assets/javascripts/application.js：
```
//= require twitter/bootstrap
```

gem 和 Bootstrap 都安装好后，初始化 wysihtml5。

<textarea id="some-textarea" class='wysihtml5' placeholder="Enter text ..."></textarea>
<script type="text/javascript">
  $(document).ready(function(){

    $('.wysihtml5').each(function(i, elem) {
      $(elem).wysihtml5();
    });

  });
</script>

【讨论】：

道歉是原始帖子中的错误。我已将 rails gem 正确指定为 gem 'bootstrap-wysihtml5-rails'。我也安装了引导程序。重新启动 rails 服务器，并将 /b3 添加到 javascript 和 css 要求的末尾后，现在显示文本区域。但是，没有任何按钮或格式化工具......只是一个带有相关占位符文本的小文本区域。有任何想法吗？感谢您的帮助！
您能否分享您的视图代码以及您在开发者工具中遇到的错误类型？

【解决方案2】：

我找到了解决方案！谢谢你们的帮助。

通过将 javascript 引用的位置移动到这个顺序，现在似乎可以工作了。

//= require jquery
//= require jquery_ujs
//= require bootstrap-wysihtml5/b3
//= require bootstrap/bootstrap

我不知道为什么订单会产生如此大的不同。但它现在有效！谢谢。

【讨论】：