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

您可以使用JavaScript更改按钮工具提示（翻译或其他方式），方法是参考data-trix-attribute来更改按钮。例如，要更改将data-trix-attribute设置为“ bold”的粗体按钮（由于浏览器不一致，最好同时设置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 (Material Design Icons by Google) 图标的解决方案。有人有一个非常巧妙的想法，用 FontAwesome 图标替换它们。

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

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

这应该在 application.scss 中。出于某种原因，我还没有追查到，即使将其导入到 application.scss 中，也无法将其放入 actiontext.scss 文件中。

Trix编辑器Rails-自定义

2 个答案: