使用 react-draft-wysiwyg 编辑器

react-draft-wysiwyg 是一个基于 React 的富文本编辑器，提供了丰富的功能，如加粗、斜体、下划线、字体大小、颜色等等。它支持以 HTML 和 Markdown 格式输入和输出，还提供了一些非常有用的扩展组件，如图片上传、表格编辑等。

安装

要使用 react-draft-wysiwyg 编辑器，需要先安装它及其依赖：

$ npm install --save react-draft-wysiwyg draft-js react react-dom

引入组件

在要使用编辑器的组件中，引入所需的模块：

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
import 'draft-js/dist/Draft.css';

使用

创建 EditorState 对象来表示编辑器的初始状态：

this.state = {
  editorState: EditorState.createEmpty(),
};

然后，在 render() 函数中，使用 <Editor /> 组件将编辑器渲染到页面上：

render() {
  return (
    <div>
      <Editor
        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange}
      />
    </div>
  );
}

editorState 属性指定编辑器的初始状态，onEditorStateChange 属性指定当编辑器状态变化时调用的回调函数。可以在回调函数中打印当前编辑器的状态来查看它包含的信息：

onEditorStateChange = (editorState) => {
  this.setState({ editorState });
  console.log(convertToRaw(editorState.getCurrentContent()));
};

导出数据

编辑器的状态以 EditorState 对象的形式存储，如果要将其导出为 Markdown 格式的文本，可以使用 draft-js 库提供的函数来将其转换为 Raw 格式，然后进一步转换为 Markdown 格式：

import { stateToMarkdown } from 'draft-js-export-markdown';

export function exportMarkdown(editorState) {
  return stateToMarkdown(editorState.getCurrentContent());
}

导入数据

要将 Markdown 格式的文本导入到编辑器中，可以使用 draft-js 库提供的函数来将其转换为 Raw 格式，然后使用 EditorState 的静态方法 createWithContent() 来创建一个包含该内容的新状态。

import { convertFromMarkdown } from 'draft-js';

export function importMarkdown(markdown) {
  const contentState = convertFromMarkdown(markdown);
  return EditorState.createWithContent(contentState);
}

结语

react-draft-wysiwyg 编辑器是一个非常强大和易用的富文本编辑器，支持多种格式输入和输出，可以方便地集成到 React 应用程序中。有关更多信息，请参阅其文档。