React + BraftEditor 实现富文本编辑

大莲芒2023-12-01 8:01

Braft Editor 是一个基于 React 和 Draft-js 开发的富文本编辑器，提供了丰富的基础功能，如基本文本格式化、列表、链接、图片上传、视频插入等，并且还支持扩展。

首先，确保你已经在项目中安装了 Braft Editor 和它的依赖项，如果没有，可以运行以下命令进行安装：
javascript 复制代码
```
npm install braft-editor --save
```

实现代码如下

备注：可以配置table的option，也可以配置工具栏

javascript 复制代码

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;