Use of rich text editor braft-editor in React + ant design

foreword

        Braft-editor usage documentation: BraftEditor Yuque

        The author's final rendering of this implementation:

Implementation

1. The default editor

• Install:

        Method 1: npm: npm install braft-editor --save 

        Method 2: yarn: yarn add braft-editor

• Import braft-editor related:

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

• Create initial values ​​for BraftEditor:

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

• Using BraftEditor:

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

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

        At this point, we can use the default braft-editor editor. If you want to take out the rich text part, just use editorState.toHTML() .

2. Personalized settings

        In the above code, the author did not set any configuration items of braft-editor, but braft-editor provides many configurations in the property Yuque , for example:

         Obviously, I don't use so much, I only need a part of it:

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"
]}

          Default optional font size:

        But the author does not need so much, set fontSize: fontSizes={[12, 14, 16, 18, 20]}

        The same goes for other configurations:

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]}

        So far, the function, font size, line number, and character spacing have been set.

        But the author hopes to upload pictures to the rich text area, so further settings are required.

3. Upload pictures

        Method 1 : Use media. Add media to the controls to achieve the purpose of uploading pictures. At this time, the base64 format of the picture will be obtained through editorState.toHTML() .

        Method 2: Use extendControls to add a fully customized React component to the toolbar.

  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}

//...

        Process the image link obtained in onChange, because the author wrote it in the form form here, so it is written as:

          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,
                    },
                  ]
                ),
              });
            }
          }}

        At this point, upload the picture in the editor, and get the url of the picture on the server through editorState.toHTML() .

4. Text link auto-completion https

        Add a hyperlink to the text in the editor. When filling in the link address, such as Baidu: https://www.baidu.com/ , many people may only write www.baidu.com, which cannot be linked to, so it needs to be completed https.

        The craft-editor provides many hooks, here I need to use toggle-link (the hook function executed before setting the text link).

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

//...

hooks={hooks}

//...

Summarize

        This article mainly introduces the use of braft-editor in React combined with ant design, including the processing of text, pictures, hyperlinks, etc. If you have any suggestions, please advise~