我无法让 Trix 编辑器在 Bootstrap 主题中正确显示

Question

我第一次尝试在我的 Article 模型上设置 ActionText。

这是我的 Article 模型的样子：

class Article < ApplicationRecord
  has_rich_text :body
end

我这样设置 ActionText：

rails action_text:install

我的 app/javascript/packs/application.js 看起来像这样：

// 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")

我的 actiontext.scss 看起来像这样：

//
// 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;
    }
  }
}

在我的 _form.html.erb 中是这样的：

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

这是HTML生成的：

<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>

但是当我重新启动服务器并重新加载页面时，它看起来像这样：

这是我的服务器日志：

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" =  ORDER BY "users"."id" ASC LIMIT   [["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   [["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   [["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)

可能是什么原因造成的？

Answer 1

我明白了....有点。

问题是我的 JS 出现了一些错误。

所以我所做的修改就是简单地注释掉出现问题的 JS 文件。

问题是我使用的 Bootstrap 模板带有很多 JS 文件。所以我不能轻易地解决问题（特别是因为 JS 不是我的强项）。

理想情况下，我想弄清楚如何防止其他 JS 错误导致 Trix 被执行。

我问了that question here。

Answer 2

不确定你是否解决了这个问题，但我遇到了同样的问题，我也是通过 rails action_text:install 安装的。我的应用使用 bootstrap 进行样式设置。

我可以通过在我的 application.scss 文件中添加 @import "trix/dist/trix"; 来解决这个问题。这是我最终需要的唯一补充。希望这对您有所帮助！

我无法让 Trix 编辑器在 Bootstrap 主题中正确显示

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

ruby-on-rails

bootstrap-4

trix

ruby-on-rails-6

actiontext