React + ant デザインでのリッチテキストエディタ braft-editor の使用

序文

Braft エディターの使用ドキュメント: BraftEditor Yuque

この実装の作者による最終的なレンダリングは次のとおりです。

実装

1. デフォルトのエディター

インストール：

方法 1: npm: npm install braft-editor --save

方法二：yarn：yarn add braft-editor

braft-editor 関連のインポート:

import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
import { ContentUtils } from "braft-utils";

BraftEditor の初期値を作成します。

  const [editorState, setEditorState] = useState(
    BraftEditor.createEditorState(null)
  );

BraftEditor の使用:

const handleChange = (editorState) => {
    setEditorState(editorState);
};

<BraftEditor
    contentStyle={
   
   { height: "400px" }}
    style={
   
   { border: "1px solid #cecece" }}
    value={editorState}
    onChange={handleChange}
/>

この時点で、デフォルトの braft-editor エディターを使用できます。リッチテキスト部分を取り出したい場合は、editorState.toHTML()を使用してください。

2. パーソナライズされた設定

上記のコードでは、作成者は braft-editor の構成項目を設定しませんでしたが、 braft-editor はプロパティ Yuqueで多くの構成を提供します。次に例を示します。

もちろん、それほど多くは使用せず、必要なのはその一部だけです。

controls={[
    "undo","redo","separator","font-size","line-height",
    "letter-spacing","separator","text-color","bold","italic",
    "underline","separator","superscript","subscript","remove-styles",
    "separator","text-indent","text-align","separator","headings",
    "list-ul","list-ol","separator","link","separator"
]}

デフォルトのオプションのフォントサイズ:

しかし、作者はそれほど多くを必要としません。 fontSize: fontSizes={[12, 14, 16, 18, 20]} を設定します。

他の構成についても同様です。

controls={[
    "undo","redo","separator","font-size","line-height",
    "letter-spacing","separator","text-color","bold","italic",
    "underline","separator","superscript","subscript","remove-styles",
    "separator","text-indent","text-align","separator","headings",
    "list-ul","list-ol","separator","link","separator"
]}
fontSizes={[12, 14, 16, 18, 20]}
lineHeights={[1, 1.2, 1.5]}
letterSpacings={[1, 2, 3]}

ここまでで、機能、フォントサイズ、行番号、文字間隔の設定が完了しました。

ただし、作者はリッチテキストエリアに画像をアップロードしたいと考えているため、さらに設定が必要です。

3. 写真をアップロードする

方法 1 : メディアを使用します。画像をアップロードする目的を達成するためにコントロールにメディアを追加します。このとき、画像の Base64 形式はeditorState.toHTML()を通じて取得されます。

方法 2: extendControlsを使用して、完全にカスタマイズされた React コンポーネントをツールバーに追加します。

  const extendControlsContent = [
    {
      key: "antd-uploader",
      type: "component",
      component: (
        <Upload
          accept="*"
          showUploadList={false}
          action="https://xxx"
          onChange={(info) => {
           
          }}
        >
          <button
            type="button"
            className="control-item button upload-button"
            data-title="插入图片"
          >
            上传图片
          </button>
        </Upload>
      ),
    },
  ];

//...

 extendControls={extendControlsContent}

//...

onChangeで取得した画像リンクを加工します、ここでは作者がフォーム形式で書いたので以下のように書きます。

          onChange={(info) => {
            if (info?.file?.response?.code === "1") {
              form.setFieldsValue({
                ...form.getFieldsValue(),
                Content: ContentUtils.insertMedias(
                  form.getFieldsValue().Content,
                  [
                    {
                      type: "IMAGE",
                      url: "http://xxx/" + info?.file?.response?.url,
                    },
                  ]
                ),
              });
            }
          }}

この時点で、エディターに画像をアップロードし、editorState.toHTML()を通じてサーバー上の画像の URL を取得します。

4. テキストリンクのオートコンプリート https

エディター内のテキストにハイパーリンクを追加します。Baidu: https://www.baidu.com/などのリンクアドレスを記入する場合、多くの人は www.baidu.com としか記入せず、リンクできません。 https を完了する必要があります。

クラフトエディターには多くのフックが用意されていますが、ここでは toggle-link (テキストリンクを設定する前に実行されるフック関数) を使用する必要があります。

  const hooks = {
    "toggle-link": ({ href, target }) => {
      href = href.indexOf("http") === 0 ? href : `https://${href}`;
      return { href, target };
    },
  };

//...

hooks={hooks}

//...

要約する

この記事では主に、テキスト、画像、ハイパーリンクなどの処理を含む、React での braft-editor の使用法と Ant デザインを組み合わせた方法を紹介します。何か提案があれば、アドバイスしてください~