braft-editor -- 富文本编辑器(自定义文件上传和拓展功能)

一、基础的富文本编辑器

pnpm install [email protected]

封装好的组件可以直接适配antd的FormItem元素；
需要注意的是获取的结果需要通过toHTML()方法转换成html元素；

import { Card } from 'antd';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
type BraftEditorProps = {
  value?: string;
  onChange?: (value: string) => void;
  width?: string | number;
  height?: string | number;
};

//表单提交的时候需要把数据通过toHTML()方法处理一下
export default ({
  value,
  onChange,
  width = '100%',
  height = '300px',
}: BraftEditorProps) => {
  return (
    
       onChange?.(editorState)}
        readOnly={false} //禁用
        placeholder="请输入正文内容" //提示
        excludeControls={['media']} //排除控件
      />
    
  );
};

二、自定义上传文件

很多博客都是通过braft-utils工具来定义图片上传，其实如果单纯的定义上传文件、视频什么的完全没有必要引用braft-utils工具，富文本已经提供现成的功能了，我们只需要稍作修改

import { Card } from 'antd';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
type BraftEditorProps = {
  value?: string;
  onChange?: (value: string) => void;
  width?: string | number;
  height?: string | number;
};

//表单提交的时候需要把数据通过toHTML()方法处理一下
export default ({
  value,
  onChange,
  width = '100%',
  height = '300px',
}: BraftEditorProps) => {
  const myUploadFn = (param: any) => {
    // 在此处调用接口
    // if (param?.file?.type === 'image/png') { }

    // 上传成功后调用param.success并传入上传后的文件地址
    param.success({
      url: 'https://img.alicdn.com/imgextra/i2/O1CN01Jd8bIr1gZUwzJDpdp_!!6000000004156-0-tps-720-540.jpg', //文件地址
      meta: {
        id: 'xxx',
        title: 'xxx',
        alt: 'xxx',
        loop: true, // 指定音视频是否循环播放
        autoPlay: true, // 指定音视频是否自动播放
        controls: true, // 指定音视频是否显示控制栏
        poster: 'http://xxx/xx.png', // 指定视频播放器的封面
      },
    });

    // 上传进度发生变化时调用param.progress
    //   param.progress(event.loaded / event.total * 100)

    // 上传发生错误时调用param.error
    //   param.error({ msg: '上传失败' });
  };

  return (
    
       onChange?.(editorState)}
        readOnly={false} //禁用
        placeholder="请输入正文内容" //提示
        media={{ uploadFn: myUploadFn }}
        // excludeControls={['media']} //排除控件
      />
    
  );
};

三、自定义拓展功能

如果你的觉得富文本目前的功能无法满足你的需求，这时就可以借助extendControls属性和braft-utils插件拓展其他功能，下面定义一个文件上传功能为例：

pnpm install [email protected]

import { PictureOutlined } from '@ant-design/icons';
import { Card, Upload } from 'antd';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import { ContentUtils } from 'braft-utils';
type BraftEditorProps = {
  value?: string;
  onChange?: (value: string) => void;
  width?: string | number;
  height?: string | number;
};

//表单提交的时候需要把数据通过toHTML()方法处理一下
export default ({
  value,
  onChange,
  width = '100%',
  height = '300px',
}: BraftEditorProps) => {
  const myUploadFn = (param: any) => {
    // 在此处调用接口
    // if (param?.file?.type === 'image/png') { }

    // 上传成功后调用param.success并传入上传后的文件地址
    param.success({
      url: 'https://img.alicdn.com/imgextra/i2/O1CN01Jd8bIr1gZUwzJDpdp_!!6000000004156-0-tps-720-540.jpg', //文件地址
      meta: {
        id: 'xxx',
        title: 'xxx',
        alt: 'xxx',
        loop: true, // 指定音视频是否循环播放
        autoPlay: true, // 指定音视频是否自动播放
        controls: true, // 指定音视频是否显示控制栏
        poster: 'http://xxx/xx.png', // 指定视频播放器的封面
      },
    });

    // 上传进度发生变化时调用param.progress
    //   param.progress(event.loaded / event.total * 100)

    // 上传发生错误时调用param.error
    //   param.error({ msg: '上传失败' });
  };

  const beforeUploadControls = async () => {
    // 接口
    // const url= await request()
    const url =
      'https://img.alicdn.com/imgextra/i2/O1CN01Jd8bIr1gZUwzJDpdp_!!6000000004156-0-tps-720-540.jpg';

    const oldValue = BraftEditor.createEditorState(value ?? null);
    const newValue = [{ type: 'IMAGE', width: '200px', url }];
    const createValue = ContentUtils.insertMedias(oldValue, newValue);
    // 输出
    onChange?.(createValue);
  };

  const extendControls: any = [
    {
      key: 'antd-uploader',
      type: 'component',
      component: (
        
          
            
          
        
      ),
    },
  ];

  return (
    
       onChange?.(editorState)}
        readOnly={false} //禁用
        placeholder="请输入正文内容" //提示
        media={{ uploadFn: myUploadFn }}
        // excludeControls={['media']} //排除控件
        extendControls={extendControls} //自定义按钮
      />
    
  );
};

 五、解决braft-utils无法找到模块

其实就是ts问题，目前翻遍各个网站没找到braft-utils的ts包，不会影响功能。

方法一：在根目录创建declaration.d.ts文件 ，添加以下代码

declare module 'braft-utils';

方法二：安装braft-utils的ts依赖包(暂无渠道)