Braft Editor
是一个基于 React
和 Draft-js
开发的富文本编辑器,提供了丰富的基础功能,如基本文本格式化、列表、链接、图片上传、视频插入等,并且还支持扩展。
-
首先,确保你已经在项目中安装了
Braft Editor
和它的依赖项,如果没有,可以运行以下命令进行安装:npm install braft-editor --save
-
实现代码如下
备注:可以配置table的option,也可以配置工具栏
import BraftEditor from 'braft-editor'; import 'braft-editor/dist/index.css'; import TableEditor from 'braft-extensions/dist/table'; import 'braft-extensions/dist/table.css'; const options = { defaultColumns: 2, // 默认列数 defaultRows: 2, // 默认行数 withDropdown: false, // 插入表格前是否弹出下拉菜单 columnResizable: true, // 是否允许拖动调整列宽,默认false }; // 启用表格扩展 BraftEditor.use(TableEditor(options)); const Editor = ({ onSuccess }, ref) => { const [editorState, setEditorState] = useState(BraftEditor.createEditorState(null)); const handleChange = (newEditorState: any) => { setEditorState(newEditorState); }; return ( <BraftEditor value={editorState} onChange={handleChange} controls={[ 'blockquote', 'bold', 'code', 'clear', 'emoji', 'font-family', 'font-size', 'fullscreen', 'headings', 'italic', 'letter-spacing', 'line-height', 'link', 'list-ol', 'list-ul', 'redo', 'remove-styles', 'separator', 'strike-through', 'text-align', 'text-color', 'text-indent', 'underline', 'undo', 'table', //可以自定义显示工具栏内容 ]} /> ); }; export default Editor;