react 添加富文本编辑器BraftEditor

需求：react添加一款富文本编辑器，可配置字体等

方案：选择BraftEditor，
extendControls属性为可扩展的受控组件，一般要配置的属性均可添加进去，
fontFamilies属性为字体数组。
安装：

# Install using yarn
yarn add braft-editor
# Install using npm
npm install braft-editor --save

使用代码

import React from "react";
import { Card } from "antd";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
function Test() {
  const extendControls = [
    {
      key: "font-family",
    },
  ];
  const fontFamily = [
    {
      name: "宋体",
      family: '"宋体",sans-serif',
    },
    {
      name: "Araial",
      family: "Arial, Helvetica, sans-serif",
    },
    {
      name: "Georgia",
      family: "Georgia, serif",
    },
    {
      name: "Impact",
      family: "Impact, serif",
    },
    {
      name: "Monospace",
      family: '"Courier New", Courier, monospace',
    },
    {
      name: "Tahoma",
      family: 'tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif',
    },
    {
      name: "黑体",
      family: '"黑体",serif',
    },
    {
      name: "楷体",
      family: "楷体",
    },
    {
      name: "幼圆",
      family: "YouYuan",
    },
  ];
  return (
      <div className="my-component">
        <BraftEditor
          extendControls={extendControls}
          fontFamilies={fontFamily}
        />
      </div>
  );
}
export default Test;

具体页面展示如下

还可选择其他配置，可扩展模块包：https://npm.taobao.org/package/braft-extensions
其使用参考：扩展参考