Trix 编辑器 Rails - 自定义

Question

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

目前按钮是黑色的，显然是英文翻译（以及替代文本）。

我应该如何更改按钮的颜色？我尝试过的一切似乎都不起作用。

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

此致

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设置为“粗体”的粗体按钮（由于浏览器不一致，最好同时设置 theTrix.config.lang和 elementtitle属性）：

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

Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');