BraftEditor使用及自动获取焦点的方法

使用方法：

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

BraftEditor官方文档

react、vue里都可以使用。

自动获取焦点方法

实现思路就是用ref实现然后获取其实例getDraftInstance()，再调用实例上的focus()方法。

import React, { FC, useEffect, useRef, useState } from 'react'
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';


const Home1 = () => {
  const [value, setValue] = useState(BraftEditor.createEditorState(null));

  const editorRef = useRef(null);

  const handleEditorChange = (val) => {
    setValue(val); //使用时需要 用toHTML转换
  }
  useEffect(() => { //一进入页面就获取焦点 当然你可以放到其他事件里比如点击某个按钮
    if (editorRef.current) {
      const editorInstance = editorRef.current.getDraftInstance(); // 获取BraftEditor实例
      console.log(editorInstance)
      editorInstance && editorInstance.focus(); // 获取焦点
    }
  }, [])
 
  return (
    <div>
      <BraftEditor
        value={value}
        onChange={handleEditorChange}
        ref={editorRef}
      />
    </div>
  )
}

export default Home1```