wangEditor 與 阿里的[pro ant design]的組合搭配

網上已經有一篇相似的文章wangEditor富文本編輯器+react+antd的使用, 固然我也參考了他的寫法, 而後實現了我到需求, 如今拿出來分享分享

版本

antd: v3.12.1
wangEditor: v3.1.1

咱們用編輯器, 大部分狀況是在表單中使用, 而antd的表單系統, 通常也離不了 form.getFieldDecorator(id, options),

1 安裝

很簡單 npm install wangeditor (注意,全是小寫)

2 和getFieldDecorator綁定

<Form.Item>
  {form.getFieldDecorator('YourInputName', {
  // ...一些屬性設置
  })(<div ref={node => this.node = node} />)}
</Form.Item>

ref={node => this.node = node}這段代碼,eslint會劃紅線,理由是沒有返回值,本人能力有限,不知道怎麼解, 還請大神指點指點,若是你沒有eslint,那就不用管它

3 組件部分

// 引入wangeditor
import WangEditor from 'wangeditor';

// ...

componentDidMount() {
    // 這個onChange事件, 是getFieldDecorator綁定的時候帶入的, 他會取代被綁定的組件的onChange事件
    // 通常和getFieldDecorator綁定過的,都用onChange來傳值
    // value也是getFieldDecorator綁定過來的, 
    const { onChange, value } = this.props;
    const editor = new WangEditor(this.node);
    editor.customConfig.onchange = html => {
        // 傳遞html
        onChange(html);
    }
    editor.create();
    // 設置初始內容
    editor.txt.html(value);
}

好了,已經綁定好了,很簡單吧,getFieldDecorator在使用的時候, 有許多注意的地方, 初學者可能會犯錯,多看看官方的文檔, 多而後本身摸索吧!