Braft Editor

一个基于 draft-js 的 Web 富文本编辑器，适用于 React 框架，兼容主流现代浏览器。

使用文档 在线演示

安装

# 使用yarn安装
yarn add braft-editor
# 使用npm安装
npm install braft-editor --save

使用

编辑器支持value和onChange属性，这类似于 React 中原生的 input 组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：

import React from "react";
import BraftEditor from "@sihe/braft-editor";
import "@sihe/braft-editor/dist/index.css";

export default class EditorDemo extends React.Component {
  state = {
    editorState: null,
  };

  async componentDidMount() {
    // 假设此处从服务端获取html格式的编辑器内容
    const htmlContent = await fetchEditorContent();
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorState数据
    this.setState({
      editorState: BraftEditor.createEditorState(htmlContent),
    });
  }

  submitContent = async () => {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = this.state.editorState.toHTML();
    const result = await saveEditorContent(htmlContent);
  };

  handleEditorChange = (editorState) => {
    this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;

    return (
      <div className="my-component">
        <BraftEditor
          value={editorState}
          onChange={this.handleEditorChange}
          onSave={this.submitContent}
        />
      </div>
    );
  }
}

当然本编辑器也支持defaultValue属性，因此你也可以将本编辑器作为一个非受控组件来使用。

更多介绍请查看详细文档