React + BraftEditor 实现富文本编辑

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

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

    javascript 复制代码
    npm install braft-editor --save
  2. 实现代码如下

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


相关推荐
中微子3 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子4 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4536 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6736 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友6 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir6 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴6 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子6 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js