Giter Club home page Giter Club logo

trix's Introduction

Trix

Build Status

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

Please see the appropriate guide for your environment of choice:

a. Ruby on Rails

trix is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the trix gem.

gem 'trix'

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

Finally, any place where you would like to use the Trix editor in your forms, just use the trix_editor helper:

f.trix_editor :body

If you are using the Formtastic gem or the Simple Form gem, you can do this:

f.input :body, as: :trix_editor

Trix

For the official Trix Github repository, go here.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/maclover7/trix.

Upgrading Trix

  1. Copy and paste Trix's trix.js to vendor/assets/javascripts/trix.js
  2. Copy and paste Trix's trix.css to vendor/assets/stylesheets/trix.css
  3. Update lib/trix/version.rb with the correct version number
  4. git commit -am 'Bump to vVERSION'
  5. bundle exec rake release

License

The gem is available as open source under the terms of the MIT License.

trix's People

Contributors

dixpac avatar hugomaiavieira avatar kylefox avatar maclover7 avatar marcindrozd avatar mateomurphy avatar nimi09 avatar rvanlieshout avatar spdawson avatar tothpeter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

trix's Issues

ul / ol support

I'm using the trix gem in my rails app, the text is being serialized/deserialized correctly and most of the html tags are working properly but ul/ol do not. for example, this text:
<div>ulist</div><ul><li>abc</li><li>def</li></ul><div>olist</div><ol><li>a</li><li>b</li><li>c</li></ol>
is saved correctly, deserializied correctly but then when repopulating the editor is simply ulistabcdefolistabc

Steps to Reproduce

<% @var = "<div>ulist</div><ul><li>abc</li><li>def</li></ul><div>olist</div><ol><li>a</li><li>b</li><li>c</li></ol>" %>
<input id='text_input' type="hidden" name="content" value="<%= @var %>">
<trix-editor input='text_input'></trix-editor>

Details
  • Trix gem version: 0.9.10
  • Browser name and version: firefox 51.0.1
  • rails: 4.2.5
  • ruby: 2.1.1p76

Thanks a lot!

Bump version 1.2

In Trix editor we have some useful feature, should we bump trix version to 1.2?

Getting Duplicate Definition Error

When clicking through to any page on my site, I keep getting the following error in Console, which prevents Trix and any remaining JavaScript to finish loading. If I refresh the page, then I don't get the error and the Trix editor loads along with the remaining JavaScripts on the page. Also, I'm using CloudFront for my assets.

This is the output of the Console:

Error: DuplicateDefinitionError: a type with name 'trix-toolbar' is already registered
e cloudfront.net/assets/...1730bfa.js
e.registerElement cloudfront.net/assets/...1730bfa.js
<anonymous> cloudfront.net/assets/...1730bfa.js
<anonymous> cloudfront.net/assets/...1730bfa.js
<anonymous> cloudfront.net/assets/...1730bfa.js
<anonymous> cloudfront.net/assets/...1730bfa.js

One additional question, should Trix be loading on all pages, or just ones with the editor?

When trying to add at.js I am getting The given range isn't in document.

I am unable to add at.js and autocomplete to trix when you type in autocomplete field you get a normal return but when you press enter to autocomplete you get "The given range isn't in document." outputted to the console

####Steps to Reproduce####
here is a link to a base rails 5.2.1
https://github.com/cgibsonmm/Trix_at.js_error

1.clone
2.bundle
3.migrate
4.run server
5. try to add @john or @jim to trix form

Details
Trix version:
Browser name and version: chrome
Operating system: mac os

a site live on heroku with the issue
https://trix-at-js.herokuapp.com/

Any way to edit the css?

I need to add a scrollbar to the textarea because if you have a lot of text there it's a nightmare for the user. Is there a way to edit the css or do I need to uninstall the gem and do the editor manually?

undefined method `model_name' for OpenStruct:Class

You get this error when trying to use

<%= f.trix_editor :note %>

within an OpenStruct. For example

<%= f.fields_for :properties, OpenStruct.new(@model.properties) do |builder| %> <% @data_fields.each do |field| %> <%= render "shared/fields/#{field.data_type.table_name}", field: field, f: builder, record: @model %> <% end %> <% end %>

Text overflows past the text box size

I am using the latest version of this gem and found that text overflows past the boundaries of the text area bleeding over the html.

if the trix_editor is set to 5 rows and I end up typing more than 5 rows, it will continue but there will not be a scroll bar that appears and the text doesn't respect the boundary set by trix_editor.

Not setting value when more than one trix editor on the page.

Hi, I have 3 froms in the same page for different use cases two of them has a trix field the first and the third, only one form is sent by pressing the general submit button but when using the trix field of the last form it's not sending anything to the controller. The value is set to the hidden input on the first form instead of the last form which doesnt get a value attribute.

Any idea of how to fix this?

Thanks a lot.

Error with trix_editor - ActionView::Template::Error

I am trying to use the trix_editor in my view but I am getting the error below, wondering what I am doing wrong?

  <div class="card mb-2">
    <%= f.trix_editor :content, class: 'trix-toolbar form-control-lg',
        placeholder: "Add a new note..." %>
  </div>
ActionView::Template::Error (wrong number of arguments (given 1, expected 0)):

          add_default_name_and_id(options)
          options['input'] ||= dom_id(object, [options['id'], :trix_input].compact.join('_'))
          trix_editor_tag(options.delete('name'), value_before_type_cast(object), options)
        end
      end
    end

Stack trace

/Users/haroon/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/bundler/gems/rails-770970fbe226/actionview/lib/action_view/helpers/tags/base.rb:46:in `value_before_type_cast'
trix (0.11.0) lib/trix/form.rb:39:in `render'
trix (0.11.0) lib/trix/form.rb:46:in `trix_editor'
trix (0.11.0) lib/trix/form.rb:52:in `trix_editor'

Version control

Hey
Can I ask you something? What would be the rails method for saving all previous versions of a note? Even when a user has logged out.

Allow arrays for class option

Rails generally accepts either an array or a string for html :class-options. My use case was a simple_form input, which looks like this:

class TrixEditorInput < SimpleForm::Inputs::TextInput
  def input(wrapper_options = nil)
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    @builder.trix_editor(attribute_name, merged_input_options)
  end
end

Which generates this html:

<trix-editor class="formatted_content [&quot;form-control&quot;, :trix_editor, :optional]" input="production_description_en_trix_input_production_2"></trix-editor>

I think it would be a good idea if this gem also supported accepting an array for :class option.

Adding Spellchecking attribute to <trix-editor> tag in rails view (.erb)

Firefox performes spellchecking in <trix-editor> in english by default. To disable spellchecking and to lower the confusion for non english users, I would like to add the spellcheck="false" attribute to it from a rails form tag.

How would that be possible? It seems the intuitive way doesn't work:
<%= f.trix_editor :post, spellcheck: "false" %>

Strong tags disappearing on update

I'm having a strange issue where strong tags show up in the editor when I use the bold button, are working on save, and on the front end when I output the saved text attribute, but when I go to edit the text on my rails form they're gone. The actual HTML in the trix-editor and the hidden input value are missing the strong tags for some reason.

This is only happening with strong tags and bold. Italics, strikethrough, blockquotes and everything else still work, so I'm not sure if it's something I've done or something messing up with the gem!

If anybody else has had this issue and knows a fix I'd be grateful :) attaching some images of the output

The frontend output
screen shot 2016-01-13 at 15 55 30

The editor output
screen shot 2016-01-13 at 15 58 15

The html for the editor output, hidden field value is the same
screen shot 2016-01-13 at 15 58 30

How to upload pictures and/or files?

Is it possible to do so and I'm missing some crucial detail or is this option not implemented (yet) ?

Really love the gem and the editor, because I can't make ckeditor work in production mode, but I think uploading pictures might be important.

TypeError: 'undefined' is not a function (evaluating 'Array.prototype.forEach.call.bind(Array.prototype.forEach)')

I had this error when I run rspec

TypeError: 'undefined' is not a function (evaluating 'Array.prototype.forEach.call.bind(Array.prototype.forEach)')
    at http://127.0.0.1:1234/assets/trix.self.js?body=1:21
    at http://127.0.0.1:1234/assets/trix.self.js?body=1:21
./spec/support/log_in_helper.rb:3:in `user_log_in'
./spec/features/company_spec.rb:8:in `block (2 levels) in <top (required)>'
-e:1:in `<main>'

Proposal: allow all options to be passed through `trix_editor_tag`

First off, thanks for the great library ๐Ÿ‘ Dropping it in was a breeze!

I'd like to pass some extra attributes to the <trix-editor> tag. For example, required="true" and some data-* attributes.

I noticed that trix_editor_tag only passes specific options into the underlying call to content_tag.

What do you think about passing options directly into content_tag?

Cheers,
Kyle.

Question on Spell checker

How come the highlight on the mis-spelled word disappear when I hit enter?
I have this in my .erb

<%= form.trix_editor :body, id: :post_body, spellcheck: "true" %>

Thanks.

simple_form `:trix_editor` not working

Firstly thanks for this gem, it makes life easy.

I have a form, SimpleForm::FormBuilder, but I get an error when I do:

f.input :description, as: :trix_editor

No input found for trix_editor

I can't see from the README I need to do anything else... any ideas please?

Possible to use with form_tag?

Hey there, thanks for the great wrapper! Is it possible to use this with trix_editor_tag or similar for non model based forms? If not, I'd be glad to write a pull request but would appreciate some pointers on where to look as I haven't written a custom form_tag helper before. Thanks for your work @maclover7 !

Community move to maintained fork or gem

EDIT 2017-07-24: We have moved community maintenance over to the trix-rails gem


Hello! ๐Ÿ‘‹

We rely on the trix gem at my place of work and I also personally rely on it for a few projects. I currently have an outstanding issue in my bugtracker to 'watch' the trix gem for the day that we no longer have to point our main application to a fork.

We have been waiting on an update for Rails 5.2 support since april. The current solution for myself, @Aberen and others is to use @DRBragg 's fork.

Another bugfix very kindly submitted by @kylefox in March hasn't been merged even though it's passing, so the current solution is to point to @bcoia 's fork. @markmercedes and @nrosella asked in April if this gem is maintained with no response as of yet.

I think instead of pinging the (very likely overloaded with plenty of work! ๐Ÿ˜„ ) maintainer we should use this issue to document our decision to either agree a 'maintained' fork or a new gem. ( trixx? trix-ruby? trix-fork?)

Rails 5.2 support

Has anybody tested Trix with Rails 5.2 yet? It's restricted in the gemspec, but that appears to be an old enough requirement that I'm guessing it might just work

0.9.8

0.9.8 is out. Just opening this issue because I saw some other update issues.

Usable with form_with?

I'm following http://guides.rubyonrails.org/getting_started.html. This simple form doesn't work with trix_editor, though it does with text_area. Error: "undefined method `to_key' for nil:NilClass. Did you mean? to_query"

<%= form_with scope: :job, url: jobs_path, local: true do |form| %>
  <p>
    <%= form.label :description %><br>
    <%= form.trix_editor :description %>
  </p>
<% end %>

The stack trace points to https://github.com/rails/rails/blob/master/actionview/lib/action_view/record_identifier.rb#L108.

I think it's trying to generate an id and class from an ActiveRecord, but the record is nil. Maybe because form_with is new, and trix_editor doesn't work with it yet?

(I beg your forgiveness in advance if this is a stupid question. I'm only about a day into learning Ruby and Rails.)

Support HTML5 required attribute

This attribute allows browsers to enforce that a field is filled before submitting a form. It doesn't appear that it's possible to 1. set required on the underlying hidden input or 2. set it on the trix-editor and have it do anything. Even setting it manually on the underlying hidden input gives a bad experience because the form won't submit but there's no error message like with a visible element.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.