Мне не удается правильно отобразить Trix Editor в теме Bootstrap - PullRequest
Новая
       207

Мне не удается правильно отобразить Trix Editor в теме Bootstrap

0 голосов
/ 28 апреля 2020

Я впервые пытаюсь настроить ActionText на моей Article модели.

Так выглядит моя модель 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>

Но когда я перезагружаю свой сервер и перезагружаю страницу, это выглядит так:

empty-rich-text-area-body

Это мой журнал сервера: 

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)

Что может быть причиной этого?

1 Ответ

0 голосов
/ 30 апреля 2020

Я понял это ... своего рода.

Проблема заключалась в том, что я получаю некоторые ошибки в моем JS.

Так что взломать, что я сделал, было просто закомментировать тот файл JS, который вызывал проблему.

Проблема в том, что я использую шаблон Bootstrap, который поставляется с большим количеством файлов JS. Поэтому я не могу легко go решить и устранить проблему (тем более что JS не является моей сильной стороной).

В идеале я хотел бы выяснить, как предотвратить другие ошибки JS от выполнения Трикс будет казнен.

Я задал этот вопрос здесь .

...