Trix のツールバー(?)を上ではなく下にしたい。 こんにちは。 現在リッチテキストが使えるテキス

Trix のツールバー(?)を上ではなく下にしたい。

こんにちは。

現在リッチテキストが使えるテキストボックスでお馴染みのTrixを使ってプログラミングをしています。

しかし、Trixのツールバーは既定で上であるため、スマホ（私の環境はAndroid）で範囲選択をすると、OS の"コピー"などのツールバーと干渉してしまいます。

Trixエディターの手軽さゆえにどのようにして変更すればよいかわからず困っています。

Trixのツールバーを下に変更するのはどうしたら良いでしょうか。

No.1 回答者： kokorororo 回答日時： 2023/12/20 14:30

以下の手順で変更できます。

Trixエディターを開きます。
画面右上の「︙」メニューをクリックします。
「設定」をクリックします。
「ツールバー」タブをクリックします。
「ツールバーの位置」で「下」を選択します。
「保存」をクリックします。
これで、Trixのツールバーが下に変更されます。

なお、Trixの設定は、Chromeの設定に保存されます。そのため、Chromeの設定をリセットすると、Trixの設定もリセットされます。

また、Trixのツールバーは、CSSでカスタマイズすることもできます。

以下は、Trixのツールバーを下に変更するCSSの例です。

CSS

trix-editor {
trix-toolbar {
position: fixed;
bottom: 0;
}
}

このCSSを、Trixエディターの親要素に適用すると、Trixのツールバーが下に変更されます。