Проблемы отображения Rails actiontext / trix - PullRequest
Новая
       147

Проблемы отображения Rails actiontext / trix

1 голос
/ 12 марта 2020

Я пытаюсь включить в свое приложение многофункциональный текстовый редактор, и мне не везет. Я собирался go с CKEditor, но столкнулся с тем фактом, что в Rails 6 довольно хорошо интегрирован actiontext / trix .... или так я думал.

Я выполнил стандартные шаги установки из https://edgeguides.rubyonrails.org/action_text_overview.html

Итак, если я что-то пропустил, у меня теперь есть следующий код в этих файлах:

app / javascript / packs / actiontext.s css 

@import "trix/dist/trix";

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

app / javascript / packs / application. js

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

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});

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

app / javascript / packs / application.s css

@import "./actiontext.scss";

Модель, для которой должен отображаться редактор: app / models / note.rb 

class Note < ApplicationRecord
  has_rich_text :comment
end

И связанный вид / форма теперь ниже, только с полем comment, включающим расширенное поле: app / views / notes / edit. html .erb 

<%= form_for @note, url: project_target_note_path(id: @note.id) do |f| %>
    <div class="form-group">
        <%= f.label :title %>
        <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :comment %>
        <%= f.rich_text_area :comment, cols: 20, rows: 40, class: "form-control" %>
    </div>
    <div>
        <%= f.submit "Update", class: "btn btn-success" %>
    </div>
<% end %>

Я в недоумении ... кнопки вообще не отображаются:

form with no buttons!

Что я пропустил?

Обновление 1: Я переместил actiontext.scss с .../packs/ и поместил в app/assets/stylesheets/ и изменил d Некоторые из импортов:

Итак, теперь app/assets/stylesheets/application.scss это просто: 

//= require actiontext

Я перезапустил webpacker и мой сервер rails: 

> bin/webpack-dev-server
> rails s

и теперь я Я получаю кнопки, но у них нет значков: update1

Обновление 2:

Получил кнопки для отображения значков ... наконец. Не уверен, что это правильно, поскольку это не задокументировано, но мне пришлось вручную импортировать application.scss.

.. / layouts / application. html .erb Я добавил: 

<%= stylesheet_link_tag "application" %>

1 Ответ

0 голосов
/ 12 марта 2020

Хотя я не думаю, что это идеальное решение, я предоставил 2 обновления выше, которые, похоже, решают мою проблему.

1: сохранить actiontext.scss в app/assets/stylesheets (там, где он был изначально создан).

2: вручную импортировать application.scss в ..layouts/application.html.erb

...