使用方法:
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
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```