我想把一个富文本编辑器集成到我的应用程序中,但没有运气。我本来打算用CKEditor,但偶然发现Rails 6已经很好地集成了actiontext/code..至少我是这么想的。
我遵循了https://edgeguides.rubyonrails.org/action_text_overview.html的标准安装步骤
所以,除非我错过了什么,我现在在这些文件中有以下代码:
app/JavaScript/packs/actiontext.scss
@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.scss
@import "./actiontext.scss";
型
我希望编辑器显示的模型是:app/models/note.rb
class Note < ApplicationRecord
has_rich_text :comment
end
型
关联的视图/表单现在在下面,只有comment
字段是支持rich的字段: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 %>
型
我在这里迷路了...没有按钮显示在所有:
x1c 0d1x的数据
我错过了什么?
**更新1:**我将actiontext.scss
从.../packs/
中移到了app/assets/stylesheets/
中,并更改了一些导入:
所以,现在app/assets/stylesheets/application.scss
只是:
//= require actiontext
型
我重启了webpacker和rails服务器:
> bin/webpack-dev-server
> rails s
型
现在我得到的按钮,但他们没有图标:
更新2:
得到了按钮显示图标.最后.不知道如果这是正确的,因为它没有记录,但我不得不手动导入application.scss
.
../layouts/application.html.erb我添加了:
<%= stylesheet_link_tag "application" %>
型
4条答案
按热度按时间6ioyuze21#
如果有人遇到同样的问题:对我来说,在
application.scss
中同时导入JavaScript样式和新的actiontext样式表(不仅仅是Rails指南中建议的样式表)很有帮助。字符串
k4emjkb12#
对于
rails 6
,您需要在javascript/packs/application.js
中要求import 'trix/dist/trix.css';
(用于css样式)的数据
hpcdzsge3#
虽然我不认为这是一个理想的解决方案,但我提供了上面的2个更新,似乎可以解决我的问题。
1:将
actiontext.scss
保存在app/assets/stylesheets
中(它最初生成的地方)。2:在
..layouts/application.html.erb
中手动导入application.scss
klsxnrf14#
使用Rails 7时,我遇到了与您几乎相同的问题,其中actiontext显示器只显示按钮,但不显示图标:x1c 0d1x
所以在尝试了不同的方法来修复它之后,我意识到,当使用**Rails 7导入Map与 Bootstrap **时,您不需要创建
actiontext.scss
文件,然后在其中导入'trix/dist/trix.css';
.字符串
在您的
layouts/application.html.erb
中,您使用<%= javascript_importmap_tags %>
,这将工作正常!这解决了我的问题。的