React + BraftEditor 实现富文本编辑

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

1. 首先，确保你已经在项目中安装了 Braft Editor 和它的依赖项，如果没有，可以运行以下命令进行安装：

   npm install braft-editor --save
   

2. 实现代码如下

   备注：可以配置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;
   
   

代码007普通

打赏 收藏 海报 链接