Ant design pro常用(11):富文本编辑器

最新推荐文章于 2025-07-02 21:37:06 发布

原创最新推荐文章于 2025-07-02 21:37:06 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用 npm 安装 wangEditor 富文本编辑器并集成到 React 应用中。通过实例展示了如何配置和使用该编辑器，包括初始化编辑器、设置状态更新等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装组件

npm i wangeditor --save

2.组件使用

import  Editor from 'wangeditor'
class OperateComponent extends Component{
	editorRef = React.createRef();//创建对象
	state={ 
          answer:undefined
      };
      componentDidMount(){
        this.initEditor();
      };
        //初始化
    initEditor(){
	        this.editor = new Editor(this.editorRef.current);
	        this.editor.config.onchange=(newHtml)=>{
	            this.setState({answer:newHtml});//属性赋值
	        };
	        this.editor.config.onchangeTimeout = 500;
	        this.editor.create()
    };
     render(){
        return (
            <Form>
                 <Form.Item  label={
                 							<span>
                 								<Text style={{color:'red'}}>*</Text>内容
                 							</span>
                 					} >
                        <div ref={this.editorRef}></div> 
                 </Form.Item>
            </Form>
        )
    }
}