css - Trix 编辑器 Rails - 自定义
问题描述
我正在使用 trix 编辑器,例如 <%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>
目前按钮是黑色的,显然是翻译成英文的(以及替代文本)。
我应该如何更改按钮的颜色?我尝试过的一切似乎都不起作用。
有没有办法提供德语翻译?我需要我的完整申请完全是德语。
最好的祝福
解决方案
您可以使用 css 更改按钮的背景颜色。
trix-toolbar .trix-button-group button {
background-color: green;
}
按钮图标是图像,因此您必须替换它们才能自定义图标颜色等。例如,使用 css 删除粗体按钮图标:
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
data-trix-attribute
您可以通过参考您想要更改的按钮的 javascript 来更改按钮工具提示(用于翻译或其他) 。例如,要更改data-trix-attribute
设置为“bold”的粗体按钮(由于浏览器不一致,最好同时设置 theTrix.config.lang
和 elementtitle
属性):
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
以下片段说明了上面的各种变化。
// hover over the now blank bold button in the toolbar to see the tooltip
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
trix-toolbar .trix-button-group button {
background-color: green;
}
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
<trix-editor></trix-editor>
推荐阅读
- c - 将指针存储为长“警告:赋值使指针从没有强制转换的整数”
- javascript - ReferenceError:在 Vue.JS 中没有定义 require
- javascript - 未捕获的类型错误:无法设置未定义的属性“显示”并且加载程序不会消失
- spring-boot - JPA @PrePersist for Firestore 的替代品(Spring Cloud GCP)
- swift - 为 ARFaceTrackingConfiguration 打开遮挡
- r - R:“注意:在 devtools:use_data 之后没有可见的全局变量绑定”
- java - 当我选择日期时,我的 android 项目总是崩溃/强制关闭
- javascript - 未定义案例
- android - CardView 在我的片段上不能完全滚动
- html - Bootstrap - 无法在导航栏中对齐 X 和 Y