ruby-on-rails Rails actiontext/Rails显示问题

zf2sa74q  于 2024-01-09  发布在  Ruby
关注(0)|答案(4)|浏览(202)

我想把一个富文本编辑器集成到我的应用程序中,但没有运气。我本来打算用CKEditor,但偶然发现Rails 6已经很好地集成了actiontext/code..至少我是这么想的。
我遵循了https://edgeguides.rubyonrails.org/action_text_overview.html的标准安装步骤
所以,除非我错过了什么,我现在在这些文件中有以下代码:

app/JavaScript/packs/actiontext.scss

  1. @import "trix/dist/trix";
  2. .trix-content {
  3. .attachment-gallery {
  4. > action-text-attachment,
  5. > .attachment {
  6. flex: 1 0 33%;
  7. padding: 0 0.5em;
  8. max-width: 33%;
  9. }
  10. &.attachment-gallery--2,
  11. &.attachment-gallery--4 {
  12. > action-text-attachment,
  13. > .attachment {
  14. flex-basis: 50%;
  15. max-width: 50%;
  16. }
  17. }
  18. }
  19. action-text-attachment {
  20. .attachment {
  21. padding: 0 !important;
  22. max-width: 100% !important;
  23. }
  24. }
  25. }

字符串

app/JavaScript/packs/application.js

  1. require("@rails/ujs").start()
  2. require("turbolinks").start()
  3. require("@rails/activestorage").start()
  4. require("channels")
  5. import $ from 'jquery';
  6. import 'bootstrap/dist/js/bootstrap';
  7. $(document).on('turbolinks:load', function() {
  8. $('body').tooltip({
  9. selector: '[data-toggle="tooltip"]',
  10. container: 'body',
  11. });
  12. $('body').popover({
  13. selector: '[data-toggle="popover"]',
  14. container: 'body',
  15. html: true,
  16. trigger: 'hover',
  17. });
  18. });
  19. require("trix")
  20. require("@rails/actiontext")

app/JavaScript/packs/application.scss

  1. @import "./actiontext.scss";


我希望编辑器显示的模型是:app/models/note.rb

  1. class Note < ApplicationRecord
  2. has_rich_text :comment
  3. end


关联的视图/表单现在在下面,只有comment字段是支持rich的字段:app/views/notes/edit.html.erb

  1. <%= form_for @note, url: project_target_note_path(id: @note.id) do |f| %>
  2. <div class="form-group">
  3. <%= f.label :title %>
  4. <%= f.text_field :title, class: "form-control" %>
  5. </div>
  6. <div class="form-group">
  7. <%= f.label :comment %>
  8. <%= f.rich_text_area :comment, cols: 20, rows: 40, class: "form-control" %>
  9. </div>
  10. <div>
  11. <%= f.submit "Update", class: "btn btn-success" %>
  12. </div>
  13. <% end %>


我在这里迷路了...没有按钮显示在所有:
x1c 0d1x的数据
我错过了什么?

**更新1:**我将actiontext.scss.../packs/中移到了app/assets/stylesheets/中,并更改了一些导入:

所以,现在app/assets/stylesheets/application.scss只是:

  1. //= require actiontext


我重启了webpacker和rails服务器:

  1. > bin/webpack-dev-server
  2. > rails s


现在我得到的按钮,但他们没有图标:

更新2:
得到了按钮显示图标.最后.不知道如果这是正确的,因为它没有记录,但我不得不手动导入application.scss.

../layouts/application.html.erb我添加了:

  1. <%= stylesheet_link_tag "application" %>

6ioyuze2

6ioyuze21#

如果有人遇到同样的问题:对我来说,在application.scss中同时导入JavaScript样式和新的actiontext样式表(不仅仅是Rails指南中建议的样式表)很有帮助。

  1. // application.scss
  2. @import "trix/dist/trix";
  3. @import "./actiontext.scss";

字符串

k4emjkb1

k4emjkb12#

对于rails 6,您需要在javascript/packs/application.js中要求import 'trix/dist/trix.css';(用于css样式)


的数据

hpcdzsge

hpcdzsge3#

虽然我不认为这是一个理想的解决方案,但我提供了上面的2个更新,似乎可以解决我的问题。
1:将actiontext.scss保存在app/assets/stylesheets中(它最初生成的地方)。
2:在..layouts/application.html.erb中手动导入application.scss

klsxnrf1

klsxnrf14#

使用Rails 7时,我遇到了与您几乎相同的问题,其中actiontext显示器只显示按钮,但不显示图标:x1c 0d1x
所以在尝试了不同的方法来修复它之后,我意识到,当使用**Rails 7导入Map与 Bootstrap **时,您不需要创建actiontext.scss文件,然后在其中导入'trix/dist/trix.css';.

  1. @import "trix";
  2. @import "bootstrap";

字符串
在您的layouts/application.html.erb中,您使用<%= javascript_importmap_tags %>,这将工作正常!这解决了我的问题。


相关问题