So I wanted tu customize Trix editor. For now I Have H2, H3 button (suprisingly they works) and "RED" button (change text color to red). In Trix editor almost everything is ok, but as soon as i save post, red color disapear. Same thing for ul and ol list. No dots or numbers (again in Trix editer they are visible).
Inspect elements in view
<h2>heading2</h2>
<h3>heading3</h3>
<span>red color</span>
<ul>
<li>First position</li>
<li>Second position</li>
</ul>
Inspect element in Trix editor
<h2>heading2</h2>
<h3>heading3</h3>
<span style="color: red;">red color</span>
<ul>
<li>First position</li>
<li>Second position</li>
</ul>
trix_toolbar_post_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
// Grab a reference to the toolbar(s) on the page.
const toolbar = this.element.previousSibling
// HTML for our buttons
const h2ButtonHTML = '<button type="button" class="trix-button" data-trix-attribute="heading" title="Subheading">H2</button>'
const h3ButtonHTML = '<button type="button" class="trix-button" data-trix-attribute="subHeading" title="Subheading">H3</button>'
// Only apply event listeners once to the toolbars
const once = {
once: true
}
addEventListener("trix-initialize", function(event) {
const sibling1 = toolbar.querySelector(".trix-button--icon-increase-nesting-level")
sibling1.insertAdjacentHTML("afterend", h2ButtonHTML)
const sibling2 = toolbar.querySelector("[data-trix-attribute='heading']")
sibling2.insertAdjacentHTML("afterend", h3ButtonHTML)
}, once)
}
}
trix_customization.js
Trix.config.blockAttributes.heading = {
tagName: "h2",
terminal: true,
breakOnReturn: true,
group: false
}
Trix.config.blockAttributes.subHeading = {
tagName: "h3",
terminal: true,
breakOnReturn: true,
group: false
}
Trix.config.textAttributes.red = {
style: { color: "red" },
parser: function(element) {
return element.style.color === "red"
},
inheritable: true
}
actiontext.scss
@import "trix/dist/trix";
.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;
}
}
}
.trix ul {
list-style-type: disc;
padding-left: 2.5rem;
}
.trix ol {
list-style-type: decimal;
padding-left: 2.5rem;
}
post form
.p-5#post
=form_for post, url: path do |form|
=form.hidden_field :user_id, value: current_user.id
.flex.flex-col.justify-center.items-center.text-center
.flex.flex-col.mt-2
= form.label :title
= form.text_field :title, required: true
.flex.flex-col.mt-2
= form.label :meta_title
= form.text_field :meta_title, required: true
.flex.flex-col.mt-2
= form.label :meta_desc
= form.text_field :meta_desc, required: true
.flex.flex-col.mt-2
= form.label :slug
= form.text_field :slug, required: true
.flex.flex-col.my-2
= form.label :inner
= form.select :inner, options_for_select([[t('views.admin_dashboard.users.participants.had_training.yup'), true], [t('views.admin_dashboard.users.participants.had_training.nope'), false]]), required: true
.flex.flex-col
= form.label :post_date
= form.datetime_field :post_date, required: true
.flex.flex-col.my-2
= form.label :image
= form.file_field :image
.flex.flex-col
= form.label :status
= form.select :status, Post.statuses.keys.map {|key| [t("activerecord.models.attributes.post.status.#{key}"), key]}, required: true
.flex.flex-col.my-2
= form.label :body, required: true
= form.rich_text_area :body, data: { controller: 'trix-toolbar-post' }, class: 'w-full trix'
=form.submit t('views.editor_portal.save_post_button'), class: 'py-2 px-4 rounded-lg border-2 border-primary-500 bg-white mt-4'
Ps. I'm using Tailwind.
Ok, so here is solution: application.rb
actiontext.scss