Forum Academy Marketplace Showcase Pricing Features

[Free Plugin] Trix Rich Text Editor

Hi @blake1,

The editor outputs content in both html as well as rich content format (also called delta; it’s a bunch of operations in json format).

You can use the better text editor in read-only mode with either of the outputs. Alternatively you can use the standard html element with the HTML output.

You can fix this with CSS:

trix-toolbar {
position: -webkit-sticky;
position: sticky;
top: -0.1rem;
font-family: sans-serif;
background-color: #fff;
z-index: 10;
padding: 1em 0;
white-space: nowrap;
display: block;
}

PS! the editor might be old, but it’s well maintained and has a living community. Over 13.000 stars on GitHub.

I need to be able to buy a rich text editor plugin outright for a client. Not a monthly subscription. Please make that an option for this plugin.

1 Like

I’m having so much trouble with this plugin and auto-binding.

1 Like

Hai @gaurav,
How you show the second preview marked red? I am getting 1st preview only (content saved in database) is there any possibility to show the exact format that users typing in the editor.?
I tried using the html element as described in airdev website.


@gaurav, is it possible to toggle the Heading level with your plugin? I see currently the output is only an H1 level heading.

@gaurav @AirDev On my “new responsive” page, I notice that this editor isn’t growing when there is more text in it.

Does this editor need to be ported to the new engine?

P.S. Trix is one of the only editors that formats my HTML in a way that can be understood by Wrike (the project management software my company uses). All of the other editors format lists with <li class=“ql-indent-1”> whereas Trix uses a series of <ul> nested within the <li>. Awesome!

For anyone having issues with Trix resetting content (once you set the initial content and try to put in new content… no dice), I have a solution for you which requires forking the plugin and adding a line of code and a Bubble element action in the plugin editor – Takes a grand total of 10 minutes.

  1. Create the plugin and mirror the data from the current Trix plugin.

  2. Add an “Element actions” called “reset”. Then click “show fields” and create a new field called content (Dynamic value, type: text)

  3. In the new function created at the bottom, add one line of code:
    instance.data.element.innerHTML = properties.content;

That’s it! You’ll now see a new field to insert content via workflow :slight_smile:

Screen Shot 2022-06-24 at 9.24.54 AM

Hope this helps anyone wanting to use Trix!