afomera / trix

Easily drop the Trix WYSIWYG editor into your Ruby on Rails application.

Trix for Ruby on Rails

Want to include Basecamp's awesome Trix WYSIWYG editor in your Ruby on Rails application? You've come to the right place!

Compatible with Rails 5.2 and up.

Note: trix-rails 2.x is technically compatible with Rails 4.2 and up, but is no longer tested or maintained. Support for < Rails 5.2 will be dropped in trix-rails 3.x

Installation

Add trix-rails to your Gemfile:

gem 'trix-rails', require: 'trix'

Run bundle install and restart your server to make the files available through the pipeline.

Import Trix styles in app/assets/stylesheets/application.css:

*= require trix

Require Trix Javascript magic in app/assets/javascripts/application.js:

//= require trix

Usage

You can use trix-rails as a standalone tag, in a form builder, or with popular form libraries.

Standalone Tag

Create a simple <trix-editor> tag:

trix_editor_tag(name, value = nil, options = {})

For example:

<%= trix_editor_tag :post, :body, required: true %>

Form builder

Create a Trix editor for a form_for or form_with attribute:

trix_editor(method, options = {})

For example:

<%= post_form.trix_editor :body, required: true, autofocus: true %>

Formtastic and Simple Form

If you're using Formtastic or Simple Form, you can do this:

f.input :body, as: :trix_editor

Options

Any options provided will be passed along to the content_tag call that outputs the <trix-editor> tag.

For example:

<%= post_form.trix_editor :body, autofocus: true, data: { coffee: :delicious } %>

will render:

<trix-editor autofocus="true" data-coffee="delicious"></trix-editor>

Contributing

Bug reports and feature requests are welcome. They're much more likely to be addressed if they are accompanied by a pull request 😘

• Report a bug
• Request a feature

Testing

All pull requests should include tests, where applicable. Pull requests without tests may be rejected.

trix-rails uses Appraisal to test against supported versions of Rails. You can run the specs against all supported versions with:

bundle exec appraisal rake spec

Upgrading Trix

To upgrade Trix, simply copy the compiled styles from trix/dist into this repository:

• Copy trix.js to vendor/assets/javascripts/trix.js
• Copy trix.css to vendor/assets/stylesheets/trix.css

License (MIT)

trix-rails is available as open source under the terms of the MIT License.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

trix's Issues

Trix Toolbar undo/redo going off of screen for mobile

I'm using Simple_Form's version of the trix editor input component. The issue I'm having is the trix editor is leaving the screen, even though its wrapped in a bootstrap container. Do you have a css class included in the package that addresses mobile views?

Feature Request - Add href target to links?

This had been requested in the actual Trix basecamp package:

basecamp/trix#286
basecamp/trix#55

But I think the consensus is that the Trix developers won't support a change like this and many believe it to be a poor decision.

So my questions are:

1. Will this feature be helpful?
2. Is it possible for this change to be made here?
3. What is the effort / time estimations involved with that?

Namespaced input id is not used on trix-editor input reference

Describe the bug
Namespaced input id is not taken into account when generating editor, thus no content is displayed into trix editor.

To Reproduce

    <%= simple_form_for entity, url: some_path(entity), namespace: 'some' do |f| %>
      <%= f.input :rich_text_field, as: :trix_editor %>
    <% end %>

Expected behavior
Input gets namespaced id some_rich_text_field. Trix editor has input value some_rich_text_field also. It populates the right value for the text field.

Actual behavior
Input gets namespaced id some_rich_text_field. Trix editor has input value rich_text_field and doesn't populate the field.

Screenshots or Video
N/A

Environment (please complete the following information):

• Rails version: 5.2.4
• trix-rails version: 2.2.0
• Browser: Version 80.0.3987.162 (Official Build) (64-bit)

SimpleForm Nested Attributes

Describe the bug
When using creating nested fields in simple form the id of the generated field does not match that of the input on the trix-editor e.g. model1_model2_attributes_field for the simple form id and model1_model2_field for the trip-editor input value

To Reproduce
Steps to reproduce the behavior:

1. Use accepts nested attributes for model 2 on model 1
2. Use simple forms simple_fields_for to nest the attributes
3. Put the trix field type on one of the nested fields
4. Fill in form
5. No value is added to the hidden input
6. Try submitting the form and nothing is passed through

Expected behavior
The input value on trix-editor element should match the ID of input. There by updating the input and then passing through values.

Actual behavior
ID and input value do not match

Environment (please complete the following information):

• Rails version: 5.2
• trix-rails version: 2.0.0
• Browser: Safari 12.0.3

Sprockets couldn't find file 'trix' after shifting to trix-rails

I have just moved to trix-rails for compatibility with Rails 5.2 but then I have this error:

Sprockets::FileNotFound - couldn't find file 'trix' with type 'application/javascript'
Checked in these paths: 
  /app/app/assets/config
  /app/app/assets/images
  /app/app/assets/javascripts
  /app/app/assets/stylesheets
  /bundle/gems/js_cookie_rails-2.2.0/vendor/assets/javascripts
  /bundle/gems/cookies_eu-1.7.3/app/assets/javascripts
  /bundle/gems/cookies_eu-1.7.3/app/assets/stylesheets
  /bundle/gems/administrate-0.10.0/app/assets/javascripts
  /bundle/gems/administrate-0.10.0/app/assets/stylesheets
  /bundle/gems/selectize-rails-0.12.5/vendor/assets/javascripts
  /bundle/gems/selectize-rails-0.12.5/vendor/assets/stylesheets
  /bundle/gems/datetime_picker_rails-0.0.7/app/assets/fonts
  /bundle/gems/datetime_picker_rails-0.0.7/app/assets/javascripts
  /bundle/gems/datetime_picker_rails-0.0.7/app/assets/stylesheets
  /bundle/gems/exception_handler-0.7.7.0/app/assets/images
  /bundle/gems/exception_handler-0.7.7.0/app/assets/stylesheets
  /bundle/gems/cocoon-1.2.11/app/assets/javascripts
  /bundle/gems/select2-rails-4.0.3/vendor/assets/javascripts
  /bundle/gems/select2-rails-4.0.3/vendor/assets/stylesheets
  /bundle/gems/momentjs-rails-2.20.1/vendor/assets/javascripts
  /bundle/gems/font-awesome-rails-4.7.0.4/app/assets/fonts
  /bundle/gems/font-awesome-rails-4.7.0.4/app/assets/stylesheets
  /bundle/gems/jquery-rails-4.3.3/vendor/assets/javascripts
  /bundle/gems/coffee-rails-4.2.2/lib/assets/javascripts
  /bundle/gems/actioncable-5.2.0/lib/assets/compiled
  /bundle/gems/activestorage-5.2.0/app/assets/javascripts
  /bundle/gems/actionview-5.2.0/lib/assets/compiled
  /bundle/gems/turbolinks-source-5.1.0/lib/assets/javascripts
  /app/node_modules
  /bundle/gems/popper_js-1.12.9/assets/javascripts
  /bundle/gems/bootstrap-4.1.2/assets/stylesheets
  /bundle/gems/bootstrap-4.1.2/assets/javascripts

The same happens with the sylesheet of course. Why doesn't Sprockets find the gem trix-rails? Am I missing something?

I am using docker for running the app, but even after rebuilding the image I have no success.

Change to version numbers?

The original version of this gem followed the same version numbers as Trix itself.

The problem with this approach is that it makes it difficult to release new features and bug fixes independently of Trix. For example: if Trix and trix-rails are both at v.0.11.4, and a bug is then fixed in trix-rails, what happens to the version number?

I think the solution is to allow Trix and trix-rails version numbers to diverge. trix-rails would follow it's own SemVer, and would also increment major/minor/patch versions alongside Trix.

Some examples:

Patch

• Trix is at 0.11.4
• trix-rails is at 0.9.2
• Trix 0.11.5 is released (patch)
• trix-rails is bumped to 0.9.3 (patch)

Minor

• Trix is at 0.11.4
• trix-rails is at 0.9.2
• Trix 0.12.0 is released (minor)
• trix-rails is bumped to 0.10.0 (patch)

Does this seem like a reasonable approach?

Webpacker support

It'd be nice to use this library with Webpacker in addition to the asset pipeline.

I use simple_form, When the form contains pictures in the submission form, the picture saving failed. There is no picture in the submitted record

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
What did you expect to happen? Be as specific as possible.

Actual behavior
What actually happened? Be as specific as possible.

Screenshots or Video
If applicable, add screenshots or video to help explain your problem.

Environment (please complete the following information):

• Rails version: x.x.x
• trix-rails version: x.x.x
• Browser:

Merge latest trix features and fixes

https://github.com/basecamp/trix/releases

This still breaks for me in 5.2.1 with wrong number of arguments a5febc8

Setup Travis CI

how to extend the toolbar using this gem?

hi, I'm trying to extend the toolbar with trix editor, like adding a image upload button.
Is it possible to customize when using your gem?

Bulleted list and numbered list not being displayed

Describe the bug
While editing, bulleted, and numbered lists will not show the bullets nor the numbers; they will be inserted.

Screenshots or Video

Environment (please complete the following information):

• Rails version: 6.0.2
• trix-rails version: 2.2.0
• Browser: chrome.

Security Fix in 1.2.2 (sanitizing pasted HTML (#709))

Hi Kyle,

Thanks for maintaining this gem.

There is currently a security fix in version 1.2.2

SECURITY: Fix sanitizing pasted HTML (#709)

https://github.com/basecamp/trix/releases

Would it be possible to bump the version of trix in this gem up to 1.2.2 ?

@kylefox

Problem using two Trix editors on the same form.

Describe the bug
When I include two Trix editors for two different fields in the same form, it actually just repeats the first field a second time.

To Reproduce
Steps to reproduce the behavior:

1. Create a model with two separate text columns.
2. Scaffold some views and a controller.
3. Use the scaffolding to create a new copy of that model with a different value in each column.
4. Update the form to use trix_editor instead of text_area and reload the edit page.
5. Observe that it's duplicating the content of the first field.

Expected behavior
It should be two different fields.

Actual behavior
It's the first field duplicated.

Screenshots or Video

This is using text_area:

This is using trix_editor:

(Both fields are trix_editor, we're just hiding the toolbar on the first one because it's not in focus.)

Environment (please complete the following information):

• Rails version: 5.2.1
• trix-rails version: 2.0.0
• Browser: Safari 11.1 (13605.1.33.1.2)