Draft.js導入手順
Draft.jsの導入手順
今回はNext(React)、TypeScript、MUI環境でのDraft.jsの導入と初期エディタ(テキストフィールド)を表示させるまでの設定についてご紹介させて頂こうと思います。
-
必要なパッケージのインストール
-
初期エディタを表示させる
必要なパッケージのインストール
必要なパッケージに関してはdraft-jsのみです。
(TypeScript環境の場合は@types/draft.jsもインストールする。)
npm
npm install draft-js
npm install --save-dev @types/draft-js //TypeScript環境のみ
yarn
yarn add draft-js
yarn add -D @types/draft-js //TypeScript環境のみ
初期エディタを表示させる
下記のように<Editor>を呼び出すことで、初期エディタを表示します。
※初期エディタは空のテキストエリアです。ここからご自身で機能を追加していくことになりますので、ご注意ください。
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
import React, { useEffect, useState } from "react";
const DraftJSEditor = () => {
const [editorEnable, setEditorEnable] = useState(false);
const [editorState, setEditorState] = useState(() =>
EditorState.createEmpty()
);
useEffect(() => {
setEditorEnable(true);
}, []);
return (
<>
{editorEnable && (
<div>
<h1>editor</h1>
<div>
<Editor
placeholder="入力してください"
editorState={editorState}
onChange={setEditorState}
/>
</div>
</div>
)}
</>
);
};
export default DraftJSEditor;
ここからは、上記記載のコードで使用しているDraft.jsの機能について説明します。
EditorState
EditorStateobjectはエディタ用のトップレベルのstateオブジェクトで、Draft editorの全ての状態を表す不変のレコードで、下記を含みます。
- 現在のテキストコンテントの状態
- 現在の選択の状態
- コンテンツ全体の装飾描写
- 取り消し/やり直しのスタック
- カーソル
因みに上記コードで使用している、createEmptyは新しいEditorStateObjectと空のContentStateとデフォルト設定(config)を返します。
カスタム設定を利用したい場合はcreateを使用しましょう。
Draft.css
Draft frameworkにはエディタに使用されるべき便利なCSSのリソースが含まれています。
Draft.cssを呼び出す(import "draft-js/dist/Draft.css";)ことで利用可能です。
Draft.cssはエディタをレンダリングする際に使用されるべきで、text alignment, spacing等の重要な機能を設定します。
また、これがないと、block positioning, alignmentやカーソルの動作に問題が出る可能性があるようなので、Draft.cssはエディタを使用する箇所では呼び出すようにしましょう。
もし、カスタムのDraft.cssを書く場合も、デフォルトの複製のようなものが必要になります。(デフォルトのをコピーし、そこに必要なスタイリングを加えたりするイメージ。)
まとめ
今回はDraft.jsのインストールから空のエディタを表示するまでをご紹介しました。
細かい機能的なところについてはこれから利用していく上で少しずつ記事にしていければと思います。
ここまで読んで頂きありがとうございました。
参考にしたサイト
Discussion