实例方法用于直接操作编辑器的内容或者触发编辑器的行为,这些操作通常无法通过编辑器的属性来完成。
要使用编辑器的实例方法,需要首先获取编辑器实例,见下方代码:
class MyPage extends React.Component {

    render () {
        // 通过ref属性来将编辑器实例赋值给this.editorInstance
        return <BraftEditor ref={instance => this.editorInstance = instance}/>
    }

}
编辑器目前有如下实例方法:
名称
说明
undo
执行一次撤销操作
redo
执行一次重做操作
clearEditorContent
清空编辑器内容
forceRender
强制编辑器内容重新渲染
setValue
设置编辑器内容,需要传入editorState对象
getValue
获取编辑器内容,返回一个editorState对象
getFinderInstance
获取编辑器的媒体库实例
getDraftInstance
获取编辑器内部的DraftJs Editor实例

使用ContentUtils操作编辑器内容

在通过受控组件的形式使用编辑器时,你可以通过操作editorState来达到一些特定的需求,为此编辑器提供了braft-utils工具包,这个包在安装braft-editor时已经作为依赖自动安装,无需另行安装。
下面是一个通过实现一个清空编辑器的功能来演示基本用法:
import React from 'react'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'

export default class Demo extends React.Component {

  state = {
    editorState: BraftEditor.createEditorState(null)
  }

  clearContent = () => {
    this.setState({
      editorState: ContentUtils.clear(this.state.editorState)
    })
  }

  handleChange = (editorState) => {
    this.setState({ editorState })
  }

  render () {

    const extendControls = [{
      key: 'clear-editor',
      type: 'button',
      text: 'Clear',
      onClick: this.clearContent
    }]

    return (
      <BraftEditor
       value={this.state.editorState}
       onChange={this.handleChange}
       extendControls={extendControls}
      />
    )

  }

}
更多关于ContentUtils的用法,请查阅源码:https://github.com/margox/braft-utils