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
4
votes
1 answer

ActionText stripping out iframe tag despite whitelisting them in Rails 6 application

I'm using ActionText inside of a rails 6 application. I added custom attachments to Trix so that users can embed Vimeo and YouTube videos. The videos are shown as expected when loaded within Trix. However, when showing them on a page using something…
ilrock
  • 95
  • 4
4
votes
1 answer

Action text trix does not render image and other html tag inside the blob partial

I am migrating an app to rails 6.1.4.4 with action text and Trix rich editor. In the backend, Trix save uploaded file to active storage blob and show in the editor perfectly fine. however when I tried to display in the front end without Trix, the…
channa ly
  • 9,479
  • 14
  • 53
  • 86
4
votes
4 answers

How do I make that JS errors don't prevent Trix from working?

This is related to this question. I figured out that there is some JS file that is throwing an error that seems to be preventing Trix from executing properly (or at all). This is what my app/javascript/packs/application.js looks like: // This file…
marcamillion
  • 32,933
  • 55
  • 189
  • 380
4
votes
0 answers

Rails 5.2: Trix with Active Storage and AWS S3

I am trying to have images uploaded via my trix editor and also want to upload the images to AWS S3. The images are getting succesfully uploaded to ActiveStorage but they are not getting uploaded to S3. I however see something like this in the…
opensource-developer
  • 2,826
  • 4
  • 38
  • 88
4
votes
1 answer

ActionText: Link to attachment instead of preview

Is there a way for Trix editor (or ActionText) to display a link of the file attached so people could download it instead of showing a preview of the file? My example attachment is a PDF.
konyak
  • 10,818
  • 4
  • 59
  • 65
4
votes
1 answer

How to override Trix HTMLSanitizer to allow span tags with class

I need to allow span tag with class in the trix editor. I could achive adding span tag by Trix.config.textAttributes.span = { tagName: "span", inheritable: true }; But I can't get class on span it is still getting stripped by the…
Donkarnash
  • 12,433
  • 5
  • 26
  • 37
4
votes
0 answers

Detecting the add link confirm event in trix editor

When making a hyperlink from a text with the trix-editor I have altered the pattern so www.website.com is acceptable for convenience. I now have to add https:// to all those links to make them valid. This is why I want to be able to know when…
Yooric
  • 87
  • 8
4
votes
3 answers

Unable to preview image after converting attachment to Base64 using Trix

I'm using Trix, and for uploading attachments our backend developer tells me that I should convert the attachment to base64 and save the base64 data to the database instead of uploading the binary file. I wrote this code for implementing it, and the…
4
votes
1 answer

At.js with Trix editor: error "The given range isn't in document."

I am trying to integrate At.js into Trix editor so that I can @mention users. $('trix-editor').atwho({ at: "@", data:['Peter', 'Tom', 'Anne'] })
Ryenski
  • 9,582
  • 3
  • 43
  • 47
3
votes
1 answer

How to open Action Text Trix attachments or links in new window (target _blank)

How to make links that I add in Trix (ActionText) editor open the link in a new window with target="_blank"? class Post < ApplicationRecord has_rich_text :rich_text_content end
Nicolas Maloeuvre
  • 3,069
  • 24
  • 42
3
votes
1 answer

Loading ActionText::Attachable from identical SGID no longer works after restoring database

I'm using ActionText and embedding IFRAME for things like YouTube and Spotify embeds. It's working great! Here's what it looks like when I render the HTML (this is for a Spotify embed as you can see):
Olly
  • 7,732
  • 10
  • 54
  • 63
3
votes
0 answers

How do we convert markdown file to trix editor format in rails

I have a bunch of markdown files as my old app documentation, but now the new documents are added via the Trix editor in my app. I tried converting the markdown file to HTML format using the redcarpet gem by doing: def parsed_body renderer =…
grafi33
  • 317
  • 2
  • 10
3
votes
1 answer

Why does an Action Text attachment render out an "action-text-attachment" tag when rendered as HTML?

I understand that Action Text attachments are store in the DB in a compressed form that appears as an "action-text-attachment" tag. However when rendered using to_trix_html this tag is not rendered as I suppose it would mess with Trix's internal…
ayushn21
  • 305
  • 2
  • 7
3
votes
2 answers

Can't render youtube embed iframe with rails 6 actiontext

I have setup a custom embed model so I can add things like instagram or youtube embeds to actiontext content on my site. It's working correctly for instagram embeds, but not youtube. As a reference, the youtube embed code I want to display is:…
JeremyKirkham
  • 1,025
  • 2
  • 11
  • 22
3
votes
0 answers

Positioning images within trix wysiwyg editor

Is there a way to position images within the Rails 6 ActiveText Trix editor when writing content? If you upload an image, it is automatically placed in the middle of the page. I can change this in the CSS file, but when writing many "blogs", how can…
1
2
3
11 12