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

Вы можете изменить всплывающие подсказки кнопки (для перевода или иным образом) с помощью JavaScript, обратившись к data-trix-attribute для кнопки, которую вы хотели бы изменить. Например, чтобы изменить кнопку жирным шрифтом, где data-trix-attribute установлен на "жирный":

Trix.config.lang.bold = 'Really Bold';

Answer 2

Я знаю, что очень опаздываю на разговор, но сегодня утром я собирался заняться этим вопросом. Есть решения по замене иконок, которые использует Trix (Material Design Icons от Google). У кого-то есть отличная идея заменить их значками FontAwesome.

Это изображения SVG, поэтому изменить цвет нельзя. Для моей конкретной ситуации я использовал фильтр webkit, чтобы изменить цвет с черного на серый:

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

Это должно быть в application.scss. По какой-то причине, которую я еще не отследил, размещение этого в файле actiontext.scss не работает, даже несмотря на то, что он импортируется в application.scss.