I can't get Trix Editor to show properly in Bootstrap theme

问题

I am trying to setup ActionText for the first time on my Article model.

This is how my Article model looks:

class Article < ApplicationRecord
  has_rich_text :body
end

I set up ActionText like so:

rails action_text:install

My app/javascript/packs/application.js looks like this:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()

window.Rails = Rails

import '../src/popper.min'
import '../src/jquery.min'
import 'bootstrap'
// import 'data-confirm-modal'

import '../src/aos'
import '../src/clipboard.min'
// many others
import '../src/theme'

$(document).on("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

import "controllers"

require("trix")
require("@rails/actiontext")

My actiontext.scss looks like this:

//
// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
// inclusion directly in any other asset bundle and remove this file.
//
//= require trix/dist/trix

// We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.
.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

In my _form.html.erb looks like this:

  <div class="form-group">
      <%= f.input :title %>
  </div>
  <div class="form-row">
      <%= f.rich_text_area :body, class: 'form-control' %>
  </div>

This is the HTML generated:

<div class="form-row">
      <input type="hidden" name="article[body]" id="article_body_trix_input_article"><trix-editor class="form-control" id="article_body" input="article_body_trix_input_article" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename"></trix-editor>
  </div>

But when I restart my server and reload the page it looks like this:

This is my server log:

Started GET "/articles/new" for ::1 at 2020-04-27 21:19:56 -0500
Processing by ArticlesController#new as HTML
  User Load (2.7ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Rendering articles/new.html.erb within layouts/application
  Rendered articles/_form.html.erb (Duration: 11.0ms | Allocations: 6694)
  Rendered articles/new.html.erb within layouts/application (Duration: 11.3ms | Allocations: 6789)
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered shared/_head.html.erb (Duration: 109.1ms | Allocations: 24220)
  Announcement Load (2.0ms)  SELECT "announcements".* FROM "announcements" ORDER BY "announcements"."published_at" DESC LIMIT $1  [["LIMIT", 1]]
  ↳ app/helpers/announcements_helper.rb:3:in `unread_announcements'
/.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
/.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
  CACHE Announcement Load (0.0ms)  SELECT "announcements".* FROM "announcements" ORDER BY "announcements"."published_at" DESC LIMIT $1  [["LIMIT", 1]]
  ↳ app/helpers/announcements_helper.rb:3:in `unread_announcements'
/.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
/.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
  Rendered shared/_navbar.html.erb (Duration: 20.8ms | Allocations: 4710)
  Rendered shared/_notices.html.erb (Duration: 0.1ms | Allocations: 18)
  Rendered shared/_footer.html.erb (Duration: 54.0ms | Allocations: 9482)
Completed 200 OK in 205ms (Views: 195.3ms | ActiveRecord: 5.6ms | Allocations: 47900)

What could be causing this?

回答1:

I figured it out....kinda.

The issue was that I am getting some errors in my JS.

So the hack I did was to simply comment out that JS file that was giving a problem.

The issue is that I am using a Bootstrap Template that comes with a lot of JS files. So I can't easily go in and fix the problem (especially since JS isn't my strong suit).

Ideally, I would like to figure out how to prevent other JS errors from making Trix be executed.

I asked that question here.

来源：https://stackoverflow.com/questions/61471679/i-cant-get-trix-editor-to-show-properly-in-bootstrap-theme

标签

ruby-on-rails

bootstrap-4

ruby-on-rails-6

trix

actiontext