avosalmonのブログ

プログラミングやWebデザイン、DTMについて調べたことをメモってます。プログラマー兼ベーシストです。

【Rails】active_adminでwysiygエディタを使用する方法

# Gemfile

gem 'activeadmin-dragonfly', github: 'stefanoverna/activeadmin-dragonfly'
gem 'activeadmin-wysihtml5', github: 'stefanoverna/activeadmin-wysihtml5'
$ bundle install
$ rake activeadmin_wysihtml5:install:migrations
$ rake db:migrate
Post.rb

ActiveAdmin.register Post do

  form do |f|
    f.inputs do
      f.input :title
      f.input :post_category
      f.input :content, as: :wysihtml5, commands: :basic, blocks: :basic
    end
    f.actions
  end

end


ロケールが日本語の場合、ja.ymlに下記を追加

ja: 
  formtastic:
    wysihtml5:
      command:
        bold: "Bold"
        italic: "Italic"
        link: "Link"
        image: "Image"
        video: "Video"
        ul: "Unordered list"
        ol: "Ordered list"
        source: "Show HTML"
        underline: "Underline"
        outdent: "Outdent"
        indent: "Indent"
      block_style: "Block style"
      blocks:
        h1: "Heading 1"
        h2: "Heading 2"
        h3: "Heading 3"
        h4: "Heading 4"
        h5: "Heading 5"
        h6: "Heading 6"
        p: "Paragraph"

      dialog:
        cancel: "Cancel"
        ok: "OK"
        image:
          dialog_title: "Insert a new image"
          url_title: "External image"
          gallery_title: "Gallery"
          upload_title: "Upload"
          url: "URL:"
          alignment: "Alignment:"
          default: "None"
          left: "Left"
          right: "Right"
          scale: "Scale:"
          alt: "Alternate text:"
          title: "<code>title</code> field:"
        link:
          dialog_title: "Insert a new link"
          url_title: "URL"
          email_title: "Email"
          anchor_title: "Anchor"
          url: "URL:"
          text: "Text:"
          rel: "<code>rel</code> field:"
          title: "<code>title</code> field:"
          email: "Email:"
          anchor: "Anchor name:"
          blank: "The link will open up a new page/tab"
          your_text_here: "Your text here"
        video:
          dialog_title: "Insert a new video from youtube or vimeo"
          url: "URL:"
          title: "Title:"
          width: "Width:"
          height: "Height:"
          your_text_here: "Your text here"

※英語のままですが、適宜日本語に訳して使ってください。


こんな風に表示されます。
f:id:avosalmon:20140802153056p:plain

jQueryのeachでループを回す

配列をループする場合
var arr = ["hoge", "hage", "hake"]
jQuery.each(arr, function() {
  document.write(this);
});

配列の各要素はthisで取り出せる。

連想配列をループする場合
var arr = {hoge:1, hage:2, hake:3}
jQuery.each(arr, function(key, val) {
  document.write(key + ":" + val);
});

各要素のキーと値をfunctionの引数に与える。

【Rails】form_forの中身をpartialにするときの注意点

f変数をrenderメソッドの第2引数に渡す必要がある。

<%= form_for(@user) do |f| %>
  <%= render 'fields', f: f %>
  <%= f.submit "Create my account" %>
<% end %>


_fields.html.erb

<%= f.label :name %>
<%= f.text_field :name %>

<%= f.label :email %>
<%= f.text_field :email %>

<%= f.label :password %>
<%= f.password_field :password %>

<%= f.label :password_confirmation, "Confirm Password" %>
<%= f.password_field :password_confirmation %>

【Rails4】active_admin+PaperClipでhas_manyなform

itemモデル has_many :item_image
item_imageモデル belongs_to :item

【Rails】PaperClip + active_adminで画像をアップロード - avosalmonのブログ
上の記事で、itemモデルが複数のitem_imageを持つ(has_many)場合、active_adminのitem登録画面で複数のitem_imageを登録できるようにする。(意味伝わりますかね?)

Model
app/models/item.rb

has_many :item_images, :dependent => :destroy
accepts_nested_attributes_for :item_images, :allow_destroy => true
app/models/item_image.rb

class ItemImage < ActiveRecord::Base
  belongs_to :item
  validates :image, presence: true
  has_attached_file :image,
                    :styles      => { :medium => "500x600<", :thumb => "75x90>" },
                    # 1つのItemが複数のItemImageをもつ場合、下記の指定が必要かも
                    :path => ":rails_root/public/system/:attachment/:id/:style/:filename",
                    :url => "/system/:attachment/:id/:style/:filename"

  validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png"] }
end
active_admin
app/admin/item.rb

permit_params :name, :price, :item_category_id, :description, :material, :item_images_attributes => [:id, :image, :_destroy]

form do |f|
  f.inputs "アイテム" do
    f.input :name
    f.input :price
    f.input :item_category
    f.input :description
    f.input :material

    f.inputs do
      f.has_many :item_images, heading: "アイテム画像", allow_destroy: true, new_record: true do |p|
        p.input :image, :as => :file, :hint => p.object.new_record? ? "" : p.template.image_tag(p.object.image.url(:thumb))
      end
    end
  end
  f.actions
end


参考記事
Rails4 - Rail 4.1.rc1でActiveAdminとhas_manyなnested form - Qiita
ruby on rails - Activeadmin and Paperclip : ArgumentError - Stack Overflow