文本编辑器用的是 wangEditor
按照官方文档的说明, ref 获取数据域, 然后通过 setFieldsValue 设置表单的值
大佬们, 求教! ??
报错信息:
this.editorRef.current.setFieldsValue is not a function
import React, { Component, createRef } from "react";
import { Card, Button, Form, Input, DatePicker } from "antd";
import { FileOutlined, GithubOutlined, EyeOutlined } from "@ant-design/icons";
import E from "wangeditor";
import "./edit.less";
// console.log(E);
export default class ArticleEdit extends Component {
constructor() {
super();
this.editorRef = createRef();
}
//? wangeditor
initEditor = () => {
this.editor = new E(this.editorRef.current);
this.editor.customConfig.onchange = (html) => {
console.log(html);
//? html 即变化之后的内容
this.editorRef.current.setFieldsValue({ content: html });
};
this.editor.create();
};
componentDidMount() {
this.initEditor();
}
render() {
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
//? layout
const layout = {
labelCol: { span: 2 },
wrapperCol: { span: 14 },
};
return (
<Card title="编辑文章" extra={<Button>取消编辑</Button>}>
<Form
name="normal_article"
className="login-form"
initialValues={{ remember: true }}
onFinish={onFinish}
{...layout}
>
<Form.Item
name="content"
label="内容区域"
rules={[{ required: true, message: "内容不可为空" }]}
>
<div className="wangeditor-index" ref={this.editorRef}></div>
</Form.Item>
<Form.Item wrapperCol={{ offset: 2 }}>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
>
保存修改
</Button>
</Form.Item>
</Form>
</Card>
);
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…