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

一、增加栏位

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，增加

  

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

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

    

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

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

          

           

               

                商品详情
               
               

                用户评价
               
            
          
          

          
            

            <%= simple_format(@product.detail) %>
            
          
         
      

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;j420)?"420":document.images[j].width;
  }
}

3.修改views

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

      

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

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

     

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

image