Questions tagged [trix]

Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.

Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.

Trix sidesteps these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all.

Resources

https://trix-editor.org/

https://github.com/basecamp/trix

175 questions
16
votes
3 answers

How to display embed video with ActionText

I am trying to display embedded videos with ActionText on Rails 6, both in the WYSIWYG Trix, and in the rendered content. But the ActionText renderer filters all raw html code and forces me to use JS to display the iframes in the rendered content,…
balthazar
  • 407
  • 7
  • 13
14
votes
2 answers

Is there an easy way to remove specific buttons from the Trix toolbar without having to create a custom toolbar

Is there an easy way to do that to remove the "decrease level" and "increase level" buttons from the trix toolbar? Right now I'm achieving this by simply rendering a custom toolbar, without the offending buttons, using the following…
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
11
votes
3 answers

How to test ActionText using RSpec?

I am trying to write an RSpec system test that involves filling out an ActionText / Trix field on a page. It seems as though ActionText::SystemTestHelper as defined here is available to help with this task but so far I have not had any success in…
mdh
  • 418
  • 5
  • 16
11
votes
1 answer

Not able to add attribute like Id or class for any tag in trix-editor while inserting HTML programmatically

I am trying to add attribute like id, class for span tag in trix-editor while inserting the html through java-script but when I checked the DOM for that tag, editor removing the added attributes from tag. My Java-script code to insert html with…
Manoj Kumar
  • 302
  • 3
  • 14
10
votes
3 answers

How to embed an iframe with ActionText/Trix on Ruby on Rails?

I can't find a way to implement the functionality of embeding youtube/vimeo video is actiontext/trix. This is what I want to achieve: GIF source: https://github.com/basecamp/trix/issues/206#issuecomment-198479999 I've looked at all the similar…
Yshmarov
  • 3,450
  • 1
  • 22
  • 41
9
votes
2 answers

JSON Parser Error 783: unexpected token at for params

I am editing a resource - @article - and whenever I submit it I get the following error: JSON::ParserError in ArticlesController#update 783: unexpected token at '#' It has highlighted this line: if…
marcamillion
  • 32,933
  • 55
  • 189
  • 380
9
votes
2 answers

How install Action Text without Active Storage?

I want to add action text to my app. But it also sets Active Storage. I already use CarrierWave, and don't need Active Storage. By the way, I do not need to upload files in the editor at all.
SsPay
  • 161
  • 9
7
votes
0 answers

Rails ActionText: Disable Direct Upload

Is there a way to disable direct upload of images and attachments from the ActionText/Trix Editor and replace it with a POST request to the rails backend to do the upload to S3? I'm trying to do this to audit any user upload actions from Rails…
konyak
  • 10,818
  • 4
  • 59
  • 65
7
votes
1 answer

Trix editor define custom attachment styles

I added an image to the Trix editor, generating the following code:
Jankapunkt
  • 8,128
  • 4
  • 30
  • 59
6
votes
2 answers

How do I integrate trix-editor in an angular 2 app?

I am trying to use trix editor for my angular app. However, I am not getting any resources/npm packages to install trix editor in an angular 2 app. Can you help me with the resources/steps to do so?
Jayant Pareek
  • 360
  • 3
  • 18
5
votes
4 answers

Is there a proper way to wire up Trix editor with Livewire?

When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way? What I have…
Elliot
  • 1,457
  • 13
  • 40
5
votes
6 answers

How to get Paper_trail to work with Action Text?

I had Paper Trail Gem nicely set up with my basic model Article which had a text column called body. However, after I have implemented Action Text to my application and removed the column body from the Article model, I can't get Paper Trail to track…
Marek Dlugos
  • 167
  • 1
  • 10
5
votes
2 answers

Rails - Capybara, populate hidden field from trix-editor

I use Trix Editor to have WISIWIG in my form. I want to test with RSpec and Capybara but trix-editor put the field hidden.
Gabriel Sigouin
  • 251
  • 4
  • 5
5
votes
1 answer

Prevent default onpaste

I am trying to build a custom paste event in React. I have a problem though that if I use the React events the event.preventDefault() is run after the default action already occurred. Here is the code: render() { return (
Ela
  • 3,142
  • 6
  • 25
  • 40
1
2 3
11 12