React でのリッチ テキスト エディターの実装

React でのリッチ テキスト エディターの実装

はじめ
に React でリッチ テキスト エディターを実装するには、 などの既存のサードパーティ ライブラリを使用できreact-quillますdraft-js。ここにreact-quill一例を示します。

まずreact-quillライブラリをインストールする必要があります。

npm install react-quill --save

次に、リッチ テキスト エディターを使用する必要があるコンポーネントにそれを導入して使用します。

import React, {
    
    useState} from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function RichTextEditor() {
    
    
  const [editorContent, setEditorContent] = useState("");

  const handleEditorChange = (content, delta, source, editor) => {
    
    
    setEditorContent(content);
  };

  return (
    <div className="rich-text-editor">
      <ReactQuill
        value={
    
    editorContent}
        onChange={
    
    handleEditorChange}
        modules={
    
    {
    
    
          toolbar: [
            [{
    
     header: [1, 2, false] }],
            ["bold", "italic", "underline", "strike", "blockquote"],
            [
              {
    
     list: "ordered" },
              {
    
     list: "bullet" },
              {
    
     indent: "-1" },
              {
    
     indent: "+1" },
            ],
            ["link", "image"],
            ["clean"],
          ],
        }}
        placeholder="请输入内容"
      />
    </div>
  );
}

export default RichTextEditor;

上記のコードでは、 use はuseStateエディターのコンテンツを保存するために使用され、handleEditorChangefunction はエディターのコンテンツが変更されたときにイベントを処理するために使用されます。

ReactQuillコンポーネントはリッチ テキスト エディターの本体として、valueおよびonChangeプロパティを使用してエディターのコンテンツを設定および取得します。

modulesプロパティは、組み込みツールバーが使用されるリッチ テキスト エディターを構成するために使用されます。

placeholderエディターのコンテンツが空の場合にプレースホルダーを表示するために使用されるプロパティ。

コンポーネントはエディターのコンテンツをHTMLフォーマットに自動的に変換します。フォーマットのコンテンツはeditorContentプロパティを通じて取得できますHTML。

quill.snow.cssさらに、エディタが依存するスタイル ファイルであるファイルを コンポーネント にロードする必要があります。