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