react+wangEditor安装及官方demo

• Z时代
• 2024-01-10
• 分类：综合

组建好react项目之后用npm安装wangEditor：

npm install wangeditor

安装好之后在页面进行引入（demo是在APP.js写的）：

import ...   
import E from 'wangeditor'  // 这里引入wangeditor
class App extends Component {
  constructor(props, context) {
      super(props, context);
      this.state = {
        editorContent: ''
      }
  }
  componentDidMount() {
    const elem = this.refs.editorElem
    const editor = new E(elem)
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.customConfig.onchange = html => {
      this.setState({
        editorContent: html
      })
    }
    editor.create()
  }
  clickHandle() {
      alert(this.state.editorContent)
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        {/* 将生成编辑器 */}
        <div ref="editorElem" style={{textAlign: 'left', width: 900, margin: '10px auto'}}>
        </div>
        <button onClick={this.clickHandle.bind(this)}>获取内容</button>
      </div>
    );
  }
}
export default App;

以上是 react+wangEditor安装及官方demo 的全部内容， 来源链接： utcz.com/z/382214.html