需求: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
其使用参考:扩展参考