lazaronixon/trix-extensions

Changes lost after reloading

Closed this issue · 6 comments

Hi,

thank you for providing this great exension to Trix. I am trying to add some extensions like the ones provided by your code to an app, but need to run it within a Rails 4 environment. I am using the vanilla Trix JS&CSS with your trix-extensions added.

They seem to work fine - I can apply your custom attributes exactly like I would expect - and the changes are persisted correctly in the backend. However - when I reload the content on the same page, the custom formatting is lost, presumably removed by some sanitising code in Trix.

Do you have any suggestions on how this could be fixed ? I've been pulling my hair out for a while on this issue

Here's a visual of what happens:

https://www.dropbox.com/s/y0fsnxa31s4ymaf/trix-editor-custom-attributes-not-persisting.mov?dl=0

This is what is saved to the backend - and then loaded again:

<div><strong>Bold is working:<br></strong><br></div><div><br></div><div>The <span style="background-color: rgb(250, 247, 133);">quick brown fox jumps</span> over the fence. <span style="color: rgb(216, 28, 170);">The slow fox</span> waits and ponders.<br><br></div><div><br></div><div><br></div>

Any help in getting this last step to work would be greatly appreciated Lázaro !

And...after 8 months I finally figured this out for myself. I had 'deferred' the loading of the trix JS....once I loaded things in the right order they worked perfectly.

lsnn commented

@patsch I have the exact same problem and I've also concluded it's due to JS loading issues. What was your solution?
I'm using a different setup (Rails 6, Rails Admin, webpacker), but maybe your solution can give me a clue.

The key problem was that I was loading the trix JS explicitely on those pages where it was needed via

<%= javascript_include_tag "trix.js", defer: true %>
<%= stylesheet_link_tag 'trix.css', media: 'all' %>

The defer: true was what caused all the problems; I didn't want to load trix for all pages and include it in application.js, but that's what I ended up doing; changing the defer to false on its own also fixed it for me.

lsnn commented

Ok thanks for your response!

I'm having the same issue here, it's been months trying to solve it,
and I couldn't! I really don't know is happening with this editor.

I tried all the solutions out there

@patsch could you give me some help?

@Hussam3bd Do you have a publicly accessible webpage that exhibits the problem ?