Zenn
💪

リッチテキストエディタの作成 - ReactやDraft.jsを活用

2024/11/24に公開
JavaScript
React
テキストエディタ
tech

はじめに

リッチテキストエディタは、テキストを装飾する、リンクを挿入する、画像を埋め込むなど、多彩な操作が可能なツールです。エディタはブログ記事作成ツールやCMSなど、さまざまな用途で利用されています。本記事では、ReactとDraft.jsを活用して、基本的なリッチテキストエディタを自作する方法を解説します。

なぜDraft.jsを選ぶのか？

Draft.jsは、Facebookが開発したリッチテキストエディタのためのフレームワークです。
以下の特徴があります：

  • 豊富な拡張性：プラグインやカスタムデータ構造の追加が容易。
  • リアルタイム編集：状態管理がしやすく、エディタ内容をReactのstateに保存可能。
  • コミュニティサポート：オープンソースで情報も多い。

環境構築

必要なライブラリ

以下のコマンドを使用して、プロジェクトにDraft.jsを導入します：

npm install draft-js

また、Reactのプロジェクトを用意するために、以下のコマンドを実行します：

npx create-react-app my-text-editor
cd my-text-editor

Draft.jsでリッチテキストエディタを実装する

エディタの基礎構築

Draft.jsを活用して、基本的なエディタを構築します。

import React, { useState } from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

const RichTextEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleEditorChange = (state) => {
    setEditorState(state);
  };

  return (
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <Editor editorState={editorState} onChange={handleEditorChange} />
    </div>
  );
};

export default RichTextEditor;

このコードは、シンプルなエディタを表示します。editorStateは現在のエディタ内容を保持し、リアルタイムで状態を更新します。

基本機能の追加

次に、文字の装飾（太字、斜体など）のツールバーを実装します。Draft.jsのRichUtilsを使うことで簡単に操作が可能です。

import React, { useState } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";
import "draft-js/dist/Draft.css";

const RichTextEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleEditorChange = (state) => {
    setEditorState(state);
  };

  const handleBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"));
  };

  return (
    <div>
      <div style={{ marginBottom: "10px" }}>
        <button onClick={handleBoldClick}>Bold</button>
      </div>
      <div style={{ border: "1px solid #ccc", padding: "10px" }}>
        <Editor editorState={editorState} onChange={handleEditorChange} />
      </div>
    </div>
  );
};

export default RichTextEditor;

カスタムスタイルの適用

さらに、エディタのカスタムスタイルを定義することで、独自の見た目を実現できます。

const customStyleMap = {
  HIGHLIGHT: {
    backgroundColor: "yellow",
  },
};

const handleHighlightClick = () => {
  setEditorState(RichUtils.toggleInlineStyle(editorState, "HIGHLIGHT"));
};

return (
  <div>
    <button onClick={handleHighlightClick}>Highlight</button>
    <div style={{ border: "1px solid #ccc", padding: "10px" }}>
      <Editor
        editorState={editorState}
        onChange={handleEditorChange}
        customStyleMap={customStyleMap}
      />
    </div>
  </div>
);

応用: 保存機能の実装

リッチテキストを保存する際、Draft.jsではconvertToRawを使い、エディタの状態をシリアライズします。以下のコードは、エディタ内容をJSONとして保存する例です。

import { convertToRaw } from "draft-js";

const saveContent = () => {
  const contentState = editorState.getCurrentContent();
  const rawContent = convertToRaw(contentState);
  console.log("Saved Content:", JSON.stringify(rawContent));
};

終わりに

Draft.jsは柔軟性が高く、カスタムのリッチテキストエディタを簡単に構築できます。今回の例では基本的なエディタ機能を紹介しましたが、これを基にして、画像埋め込み、リンク機能、プラグインの実装など多くの機能を追加できます。

リッチテキストエディタを構築し、自社製品やプロジェクトで活用してみてください！

Discussion