我无法使Trix Editor在Bootstrap主题中正确显示 [英] I can't get Trix Editor to show properly in Bootstrap theme

问题描述

我正在尝试在我的Article模型上首次设置ActionText.

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

这是我的Article模型的外观:

class Article < ApplicationRecord
  has_rich_text :body
end

我这样设置ActionText:

I set up ActionText like so:

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中看起来像这样:

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>

这是生成的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>

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

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

这是我的服务器日志:

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?

推荐答案

我知道了.... kinda.

I figured it out....kinda.

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

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

所以我做的黑客只是简单地注释掉有问题的JS文件.

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

问题是我使用的是带有许多JS文件的Bootstrap模板.因此，我无法轻松解决此问题(尤其是因为JS不是我的强项).

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

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

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

我在这里问了这个问题.

这篇关于我无法使Trix Editor在Bootstrap主题中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！