trix: several buttons not working?

Editor doesnt seem to be completing several actions when using a few buttons work but others do nothing at all

Steps to Reproduce

clicking several buttons wont work
Bullet point, speech marks

Details

Trix version: latest
Browser name and version: Chrome latest Version 75.0.3770.100
Operating system: mac

also whenever you click on editor this error appears for any action on editor

custom-elements-es5-adapter.js:13 Uncaught TypeError: Illegal constructor at new HTMLElement (custom-elements-es5-adapter.js:13) at new n (app.js:22) at text/html (app.js:23) at Object.serializeToContentType (app.js:23) at a.updateInputElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.compositionControllerDidRender (app.js:28) at c.render (app.js:25) at a.render (app.js:28)

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22 (2 by maintainers)

Most upvoted comments

this fix my problem with tailwind css

trix-editor ul { list-style-type: disc !important; margin-left: 1rem !important; }
trix-editor ol { list-style-type: decimal !important; margin-left: 1rem !important; }

+18

0aljawi0 on Feb 3, 2021

when using tailwindcss and the tailwindcss/typography plugin you can also add

trix-editor { @apply prose max-w-none }

to your css.

That way the typography plugin applies all stylings regarding lists, quoteblocks, etc. in a quite simple way in my opinion

dajoeberlei on May 3, 2022

Thanks @0aljawi0, Tailwind defaults was my issue too. I extended it for links:

trix-editor a { text-decoration: underline; }

Note: I try to avoid using !important in my CSS unless absolutely necessary - this fix works just fine without it 😄

developius on Jul 28, 2021

This is still a problem. Happening in Rails 6 with Action Text. Do we have any workaround that isn’t either 1) Not use Vue or 2) move Trix outside of the Vue app?

tjbarber on Jul 23, 2020

Tailwind may be a problem for those who are using it:

seems that tailwind lists have a default of list-style-type: none https://tailwindcss.com/docs/list-style-type

Is there some kind of way to add a class to every ul element by Trix? when someone creates a <ul>-tag trix would need to transform it to a <ul class="list-disc">-tag

Putting this into my css file fixed it ul { list-style-type: disc !important;}, but this will then apply to all ul-tags in the project…

simbig on Nov 29, 2020

The repair above worked for me. I had to do this:

ul { list-style-type: disc !important; }
ol { list-style-type: decimal !important; }

martinstreicher on Jan 5, 2021

I have the same issue. The buttons are enabled, and I can format the text with hot keys. But clicking the buttons has no effect.

No errors in the console (safari/ff/chrome)

tillcarlos on Oct 7, 2019

@iiCe89 wow… yes, same here. Thanks a lot, your comment made me try it at all 😃

I get it to work when I include trix in another pack, but then Vue does not render components and shows NotSupportedError: Operation is not supported in trix.js:1417.

Weird - I’m trying more.

tillcarlos on Oct 8, 2019