2018-02-14 15:44:38 -05:00
|
|
|
# Active Text
|
|
|
|
|
|
|
|
🤸♂️💰📝
|
|
|
|
|
|
|
|
## Installing
|
|
|
|
|
|
|
|
Assumes a Rails 5.2+ application with Active Storage and Webpacker installed.
|
|
|
|
|
|
|
|
1. Install the gem:
|
|
|
|
|
2018-02-14 15:49:19 -05:00
|
|
|
```ruby
|
|
|
|
# Gemfile
|
|
|
|
gem "activetext", github: "basecamp/activetext", require: "active_text"
|
|
|
|
gem "mini_magick" # for Active Storage variants
|
|
|
|
```
|
|
|
|
|
2018-02-14 15:44:38 -05:00
|
|
|
1. Install the npm package:
|
|
|
|
|
2018-02-14 15:49:19 -05:00
|
|
|
```js
|
|
|
|
// package.json
|
|
|
|
"dependencies": {
|
|
|
|
"activetext": "basecamp/activetext"
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ yarn install
|
|
|
|
```
|
|
|
|
|
|
|
|
```js
|
|
|
|
// app/javascript/packs/application.js
|
|
|
|
import "activetext"
|
|
|
|
```
|
2018-02-14 15:44:38 -05:00
|
|
|
|
|
|
|
1. Declare text columns as Active Text attributes:
|
|
|
|
|
2018-02-14 15:49:19 -05:00
|
|
|
```ruby
|
|
|
|
# app/models/message.rb
|
|
|
|
class Message < ActiveRecord::Base
|
2018-04-13 17:10:18 -04:00
|
|
|
has_rich_text :content
|
2018-02-14 15:49:19 -05:00
|
|
|
end
|
|
|
|
```
|
2018-02-14 15:44:38 -05:00
|
|
|
|
2018-04-13 17:10:18 -04:00
|
|
|
1. Replace form `text_area`s with `rich_text_field`s:
|
2018-02-14 15:44:38 -05:00
|
|
|
|
2018-02-14 15:49:19 -05:00
|
|
|
```erb
|
|
|
|
<%# app/views/messages/_form.html.erb %>
|
|
|
|
<%= form_with(model: message) do |form| %>
|
|
|
|
…
|
|
|
|
<div class="field">
|
|
|
|
<%= form.label :content %>
|
2018-04-13 17:10:18 -04:00
|
|
|
<%= form.rich_text_field :content %>
|
2018-02-14 15:49:19 -05:00
|
|
|
</div>
|
|
|
|
…
|
|
|
|
<% end %>
|
|
|
|
```
|