Trix Editor Rails -自定义

Question

我正在使用trix编辑器，比如<%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>

目前，按钮是黑色的，明显翻译成英文(以及alt文本)。

我该如何改变按钮的颜色呢？我试过的所有东西似乎都不管用。

有没有办法提供德语翻译？我需要我的完整申请是完全德国。

诚挚的问候

Answer 1

您可以使用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设置为“粗体”的粗体按钮(由于浏览器不一致，最好同时设置Trix.config.lang和元素title属性)：

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>

​

Answer 2

我知道我的谈话真的很晚，但我今天早上正在考虑做这个问题。有解决方案，以取代图标，Trix utilizes (材料设计图标由谷歌)。有人想出了一个非常棒的主意，用FontAwesome图标来代替它们。

这些是SVG图像，因此颜色不能更改。对于我的特殊情况，我使用webkit过滤器将颜色从黑色更改为灰色：

trix-toolbar .trix-button--icon {
   -webkit-filter: invert(50%);
}

这应该放在application.scss中。由于我还没有追踪到的原因，将它放在actiontext.scss文件中是不起作用的，即使它正在导入到application.scss中。