购物商城后台增加商品详情并使用富文本编辑器

一、增加栏位

1.修改model，在 product中，增加一个detail栏位
rails g migration add_detail_to_products detail:text

rake db:migrate

2.修改app/controllers/admin/products_controller,在最后增加detail栏位

def product_params
    params.require(:product).permit(:title,:title, :description, :quantity, :price, :image, :detail)
end

3.修改views

• 修改app/views/admin/products/new.html.erb，增加

  <div class="group">
            <%= f.input :detail, :label => "商品详情" %>
    </div>

• 修改app/views/admin/products/edit.html.erb，增加

    <div class="group">
        <%= f.input :detail,  :label => "商品详情" %>
    </div>

• 修改app/views/products/show.html.erb，增加

<!-- 商品详情区域>
    <div class="container">
      <div class="col-md-12 product-detail">
        <!-- 导航栏 -->
          <div class="row">
           <ul class="nav nav-tabs nav-justified">
               <li class="active">
                <a href="#tab_default_1" data-toggle="tab">商品详情</a>
               </li>
               <li>
                <a href="#tab_default_2" data-toggle="tab">用户评价</a>
               </li>
            </ul>
          </div>
          <div class="tab-content">
          <!-- 商品详情区域 -->
            <div class="product-detail-box row tab-pane active" id="tab_default_1">
            <%= simple_format(@product.detail) %>
            </div>
          <!-- 商品评论区域 尚未添加-->
         </div>
      </div>
   </div>

4.修改css，修改app/assets/stylesheet/application.scss, 增加
/leo-商品详情区域样式

.product-detail {
        margin: 1.1em 0 3em;
}
.product-detail-box {
        border: 1px solid #e3e3e3;
        border-top: none;
        padding: 2em 1.2em;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 1.6em;
img {
        max-width:100%;height:auto;             //重要样式代码，需要配合application.js的自适应代码块一起使用
    }
}

二、添加富文本编辑器

1.安装gem

gem 'bootstrap-wysihtml5-rails'

bundle install
详见：https://github.com/Nerian/bootstrap-wysihtml5-rails

2.修改
需要修改的assets文件app/assets/stylesheets/applicaiton.scss,添加

@import "bootstrap-wysihtml5/bootstrap3-wysihtml5";

在app/assets/javascripts/application.js添加

//= require bootstrap
//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/zh-CN

// 图片自适应大小支持代码块
// 在product/show.html.erb的页面中，对img图片用这一格式进行校正
// 让图片在大于div宽度时自动缩小不而溢出，确保版面的公正和美观
function ReImgSize(){
  for (j=0;j<document.images.length;j++)
  {
    document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
  }
}

3.修改views

• 修改app/views/admin/products/new.html.erb，增加 as: :wysihtml5

      <div class="group">
          <%= f.input :detail, as: :wysihtml5,:label => "商品详情" %>
      </div>

• 修改app/views/admin/products/edit.html.erb，增加

     <div class="group">
       <%= f.input :detail, as: :wysihtml5, :label => "商品详情" %>
     </div>

image