Update instructions for rich text custom rendering [ci-skip]

Since #43110, we no longer generate `.scss` files by default.

This commit:

* Changes remaining `.scss` filenames to `.css`.
* Updates the instructions for omitting the default Trix styles.
* Eliminates repetitive use of the word "default".
* Reorders the content slightly for better flow.
This commit is contained in:
Jonathan Hefner 2022-02-10 16:16:43 -06:00
parent 73e0a9c749
commit 940980d1af
1 changed files with 13 additions and 16 deletions

View File

@ -113,16 +113,8 @@ end
## Rendering Rich Text content
Action Text will sanitize and render rich content on your behalf.
By default, the Action Text editor and content are styled by the Trix defaults.
If you want to change these defaults, remove the `// require "actiontext.scss"`
line from your `application.scss` to omit the [contents of that
file](https://raw.githubusercontent.com/basecamp/trix/master/dist/trix.css).
By default, Action Text will render rich text content into an element that
declares the `.trix-content` class:
By default, Action Text will render rich text content inside an element with the
`.trix-content` class:
```html+erb
<%# app/views/layouts/action_text/contents/_content.html.erb %>
@ -131,13 +123,18 @@ declares the `.trix-content` class:
</div>
```
If you'd like to change the rich text's surrounding HTML with your own layout,
declare your own `app/views/layouts/action_text/contents/_content.html.erb`
template and call `yield` in place of the content.
Elements with this class, as well as the Action Text editor, are styled by the
[`trix` stylesheet](https://raw.githubusercontent.com/basecamp/trix/master/dist/trix.css).
To provide your own styles instead, remove the `= require trix` line from the
`app/assets/stylesheets/actiontext.css` stylesheet created by the installer.
You can also style the HTML used for embedded images and other attachments
(known as blobs). On installation, Action Text will copy over a partial to
`app/views/active_storage/blobs/_blob.html.erb`, which you can specialize.
To customize the HTML rendered around rich text content, edit the
`app/views/layouts/action_text/contents/_content.html.erb` layout created by the
installer.
To customize the HTML rendered for embedded images and other attachments (known
as blobs), edit the `app/views/active_storage/blobs/_blob.html.erb` template
created by the installer.
### Rendering attachments