富文本框

当前使用了Braft-editor作为富文本框组件。

1. 安装与使用

1.1 引入组件

这里使用了braft，按照官方文档操作会出现问题，所以要按照下面的来引用相应的组件。

"braft-editor": "^2.3.9",
    "braft-utils": "^3.0.12",
    "draft-js-multidecorators": "^1.0.0",
    "draftjs-utils": "^0.9.4",

1.2 参考网址

官方网址把大部分功能都描述了。

官方帮助文档

2. 具体案例

2.1 import 组件

import 相关组件

// 富文本框组件
import BraftEditor from 'braft-editor';
import type { EditorState } from 'braft-editor';
import { ContentUtils } from 'braft-utils';
import 'braft-editor/dist/index.css';

2.2 赋值控件

使用了BraftEditor.createEditorState进行转换，并且用form.setFieldsValue({ ...help });赋值。

// 读取取数据库中的数据，并刷新页面
React.useEffect(() => {
  const fun = async () => {
    if (!isAdd(id)) {
      const result = await getHelpById(id);
      if (result?.data) {
        const help = result.data;
        // 讲文本内容，转换成富文本款可以现实的格式
        help.helpInfo = BraftEditor.createEditorState(help.helpInfo);
        form.setFieldsValue({ ...help });
      }
    } else {
      // 设置一个初始化的数据
      let tempRecord = {};
      tempRecord = { helpSort: 0 };
      form.setFieldsValue(tempRecord);
    }
  };
  fun();
}, [id]);

2.3 配置 Form

指定表单项helpInfo
指定高度contentStyle
指定边框style

<Form.Item label="文章正文" name="helpInfo">
  <BraftEditor
    className="editor-wrapper"
    placeholder="请输入正文内容"
    contentStyle={{ height: 210 }}
    style={{ border: '1px solid #d9d9d9' }}
  />
</Form.Item>

2.4 插入图片

这个函数用来插入图片的：

form.getFieldValue('helpInfo')得到对象
ContentUtils.insertMedias进行转换
form.setFieldsValue写入组件

/**
 * 添加一个图片
 * @param url
 */
const insertPic = (url: string | undefined) => {
  // 更新插入媒体后的editorState
  const helpInfo: EditorState = form.getFieldValue('helpInfo');
  // 使用ContentUtils.insertMedias来插入媒体到editorState
  const editorState = ContentUtils.insertMedias(helpInfo, [
    {
      type: 'IMAGE',
      url,
    },
  ]);
  // 刷新内容
  form.setFieldsValue({ helpInfo: editorState });
};

2.5 保存数据

需要讲富文本框中的内容，转换成string，然后保存到数据库中。

values.helpInfo.toHTML()

/**
 * 保存事件
 * @param values 表单传递过来的参数
 */
const onFinishHandle = async (values: Record<string, any>) => {
  // console.log(values.helpInfo.toHTML());
  const data: any = {
    ...values,
    helpId: id,
    helpInfo: values.helpInfo.toHTML(),
  };
  const ren: API.ResponseInfo<number> = await saveHelp(data);
  if (ren.success) {
    message.success('保存成功');
    // 关闭编辑框
    close();
    // 不返回不会关闭弹框
    return true;
  }
  message.error('保存失败');
  return false;
};

3. 高级功能

3.1 预览

在新弹出的页面中进行预览，主要步骤有三个：

引入公共脚本

import { preview } from '@/utils/editor';

定义预览按钮

const extendControls = [
  {
    key: 'custom-button',
    type: 'button',
    text: '预览',
    onClick: () => {
      preview(form.getFieldValue('helpInfo').toHTML());
    },
  },
];

富文本框中添加预览按钮

<BraftEditor
  className="editor-wrapper"
  placeholder="请输入正文内容"
  contentStyle={{ height: 210 }}
  // @ts-ignore
  extendControls={extendControls}
  style={{ border: '1px solid #d9d9d9' }}
/>

3.2 数据校验

在Form.Item 中添加rules 属性

<Form.Item
  label="文章正文"
  name="helpInfo"
  rules={[
    {
      required: true,
      validateTrigger: 'onBlur',
      validator: (_, value, callback) => {
        console.log(value);
        if (value.isEmpty()) {
          callback('请输入正文内容');
        } else {
          callback();
        }
      },
    },
  ]}
>
  <BraftEditor
    className="editor-wrapper"
    placeholder="请输入正文内容"
    contentStyle={{ height: 210 }}
    // @ts-ignore
    extendControls={extendControls}
    style={{ border: '1px solid #d9d9d9' }}
  />
</Form.Item>

ant-learning