【 Ruby on Rails】Hướng dẫn sử dụng ActionText

【 Ruby on Rails】Hướng dẫn sử dụng ActionText

Cài đặt ActionText


rails action_text:install

rake db:migrate

Không cần phải có column "content" trong table articles

app/models/article.rb
has_rich_text :content
validates :content, presence: true, length: { minimum: 5 }

app/controllers/articles_controller.rb
def article_params
  params.require(:article).permit(:content)
end

app/views/articles/_form.html.slim
= f.label :content
= f.rich_text_area :content

app/views/articles/show.html.slim
== @article.content

Customize style


app/javascript/src/application.scss
@import "trix/dist/trix";
@import "../../assets/stylesheets/actiontext";

app/assets/stylesheets/actiontext.scss
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


Gemfile
gem 'image_processing'


Trường hợp AWS không upload được hình ảnh thì setting CORS như sau:
<?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

https://github.com/lazaronixon/trix-extensions
Thêm chỉnh màu sắc, 6 thẻ heading và hr

Lưu ý setting trong file config/environments/production.rb
config.assets.compile = true
Updated by Yuto at 2020-08-15 01:06
0
Like this article