2

Im working on a project in ruby on rails (rails 6), that include a blog working with action-text and trix. I have to add few option to my rich-text editor and there is one that block me for few days.

I added buttons in my trix toolbar, for add more title tag options following this issue and everything worked fine.

But when i try to add text-align options (left, right, center) it dont work

I tried many thing, but i would expect this to work:

in application.js

Trix.config.textAttributes.alignLeft = {
style: { textAlign: "left" },
parser: function(element) {
    return element.style.alignLeft === "left"
},
inheritable: true

}

then i insert it in the toolbar like this: in application.js also

addEventListener("trix-initialize", function(event) {
var buttonHTML = '<button type="button" data-trix-attribute="alignLeft">RED</button>'

event.target.toolbarElement.
querySelector(".trix-button-group").
insertAdjacentHTML("beforeend", buttonHTML)

})

I tried both, with blockAttributes and textAttributes but dont work. The button appear but does nothing. What i want is that the div where my text is embed get style=" text-align: left"

Do you have an idea of how i could make it work? or maybe ideas, advices or lectures propositions?

(i saw somes issues in basecamp/trix github that speak about that(this one is really interesting), but its appear that the customized tag option, is not a good option and i didnt managed to make anything else work.

Thanks a lot

Joachim
  • 111
  • 8
  • In this fiddle, one of the trix devs shows some ways to do conditional logic and add buttons etc. could this help? you could toggle right-align class ? Let me know how it goes. customizing trix is hard! https://jsfiddle.net/javan/z66gzbcp/3/ – Will Jan 13 '22 at 20:55

1 Answers1

0

you can see this enter link description here

insert some button like this, and multiple alignments cannot exist in the same paragraph of text, and you can see enter link description here

chinacheng
  • 161
  • 1
  • 5