西安商城网站制作,外包网接单,网站头部 标签,wordpress中文清爽博客主题:jishuzh主题分享Braft Editor 是一个基于 React 和 Draft-js 开发的富文本编辑器#xff0c;提供了丰富的基础功能#xff0c;如基本文本格式化、列表、链接、图片上传、视频插入等#xff0c;并且还支持扩展。 首先#xff0c;确保你已经在项目中安装了 Braft Editor 和它的依赖项#x…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 (BraftEditorvalue{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;
