likes
comments
collection
share

Antd 表单中使用自定义编辑器

作者站长头像
站长
· 阅读数 111

如何在 antd 中自定义控件？

这个问题在需要定制需求的是时候，可能非常常见。例如可能需要一个表单与富文本编辑器，或者 markdown 编辑器的结合，自定义一个控件，其实 Antd 官方自己已经给出了答案，这里给出两个案例，希望能够帮助需要的人

  • draft.js 编辑器
  • tinymce 编辑器

使用 vite + typescript + antd + draft.js 初始一个项目

pnpm create vite

# 输入项目名字， 选择则 vite + typescipt + react

cd <your_project>
pnpm install # 使用 pnpm 管理项目
# 安装其他依赖
pnpm install antd draft-js

pnpm dev # 启动服务，浏览器打开 5173 端口

添加 DraftEditor 组件

import type { FC } from "react";

import { useState } from "react";
import { Editor, EditorState } from 'draft-js/dist/Draft'

import 'draft-js/dist/Draft.css';

const DraftEditor: FC = ({value, onChange}) => {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty(),
  );

  const $onChange = (value) => {
    const content = editorState.getCurrentContent()
    const plaintext = content.getPlainText()
    setEditorState(value)
    onChange(plaintext)
  }

  return <Editor editorState={editorState} onChange={$onChange} />;
}

export default DraftEditor

注意：

  • 注意阅读 draftEditor 初始化数据，可以 官方文档
  • DraftEditor 组件必须通过 props 传递 value/onChange 两个属性
  • onChange 事件与 Editor 的 onChange 事件的配合

使用组件

const onFinish = (v) => {
    // debugger
}
 
<Form onFinish={onFinish}>
    <Form.Item label="编辑器" name="editor" labelCol={{span: '2'}}>
      <DraftEditor />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form.Item>
</Form>

点击提交按钮, onFinish 事件中就能从表单中获取到数据, OK!

使用 vite + typescript + antd + tinymce-react 初始一个项目

添加 TinyMCEEditor 组件

import type { FC, SetStateAction } from "react";

import { useState } from "react";
import TinyMCE from 'tinymce-react'

const TinyMCEEditor: FC = ({value, onChange}) => {
  const [v, setV] = useState(value)
  return  <TinyMCEEditor 
    apiKey={''} 
    config={{
      height: 500,
      plugins: 'image table'
    }}
    content={v} 
    onContentChanged={(content: SetStateAction<string>) => {
      // debugger
      onChange(content)
      // setV(content)
    }}
/>
}

export default TinyMCEEditor

使用组件

<Form onFinish={onFinish}>
    <Form.Item label="编辑器" name="editor" labelCol={{span: '2'}}>
      <DraftEditor />
    </Form.Item>
    <Form.Item label="TinyMCEEditor编辑器" name="tiny-editor" labelCol={{span: '2'}}>
      <TinyMCEEditor />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form.Item>
</Form>

小结

  • antd 表单中自定义控件
  • 重要的属性是 onChange 和 value 正确被使用
  • 这里解决获取富文本内容，其他安全等等问题，需要使用者自己注意

文章推荐

参考

转载自:https://juejin.cn/post/7164867599816196126
评论
请登录