Cài đặt ActionText

rails action_text:install

rake db:migrate

has_rich_text :content
validates :content, presence: true, length: { minimum: 5 }

def article_params
  params.require(:article).permit(:content)
end

= f.label :content
= f.rich_text_area :content

== @article.content

Customize style

@import "trix/dist/trix";
@import "../../assets/stylesheets/actiontext";

trix-editor {
  min-height: 500px;
  height: auto !important;
  overflow: auto;

  blockquote {
    font-style: italic;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 5px solid lightgray;
  }

  pre {
    font-family: 'Courier New';
    background-color: lightgray;
  }
}

trix-toolbar {
  // Important: position sticky is not work if the parent have overflow attribute
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 999;
}

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }

  h1 {
    font-size: 1.8em;
  }

  pre {
    font-family: 'Courier New';
    background-color: lightgray;
  }
}

Use image

gem 'image_processing'

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Trix extensions

config.assets.compile = true