ReactでTrixエディタを利用する

概要

標題の通りですが、ReactでTrixエディタを利用するための手順です。
WYSIWYGエディタの1種です。WYSIWYGエディタは、グラフィカルにユーザーが文章を記載する際に編集することができるエディタです。Wordpressの投稿画面があると思いますが、あれも一種です。そうは言ってもイメージが湧かないと思いますので次のリンクを見れば、あ〜これかとなるかと思います。トリックスエディタ
ちなみに、Trixエディタは、Rails6からAction_textとして導入されましたね。

ReactにTrixエディタを入れる

あまり複雑にするとわかりずらくなりますので、最小構成で書きます。
まず適当なプロジェクトを作成し、npmで用意されているTrixエディタをインストールします。

※ Trixエディタのnpmサイト

npx create-react-app プロジェクト名

できたプロジェクトに入り、Trixエディタのパッケージをインストールします。

npm install trix

次にできたプロジェクトにtrixエディタを反映させます。
下の2つのコードをApp.jsに追加します。

import Trix from "trix";

と

<trix-editor input="trix" />

を加えます。できたばかりのプロジェクトなら、下記のようなコードになるかと思います。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Trix from "trix";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
      <trix-editor input="trix" />
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

次にApp.cssの適当な場所に下記を追加してデザインの適用をします。

@import "~trix/dist/trix.css";

ここまでできると下記のようにいつものReactのスタート画面下にエディタが表示されてますね。

おまけ(react-trix)

ここまででreactでtrixを使えることには使えるのですが、自分でコンポーネント化したりしてすぐに使えるようにはならないと思います。その場合、npmのtrixのラッパーのパッケージがあります。

※ react-trixのnpmサイト

こちらはコンポーネント化されているので直ぐに使えます。ただし上記の元のtrixを最初にnpmで入れとく必要があります。Trixエディタ自体が独自属性なのでやってみるとわかると思いますが、onChangeで値を取れません。stateに入れたい時とかそこらへんが厄介ですが、このパッケージはうまくやってくれるのでサクッと済ませるならこれでもいいと思いました。