react-draft-wysiwyg的使用

---

一、React Draft Wysiwyg是什么？

是使用 ReactJS 和 DraftJS库构建的 富文本编辑器

二、在React项目中使用

安装

yarn add react-draft-wysiwyg draft-js
or
npm i react-draft-wysiwyg draft-js

使用

推荐在项目中单独创建一个富文本编辑器组件

// 引入react-draft-wysiwyg
import { Editor } from "react-draft-wysiwyg";
// 引入样式
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
// 创建富文本组件
<Editor
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
/>;

这样就能创建出一个非受控的Editor组件，所以我们可以通过editorState和onEditorStateChange让Editor组件变成一个受控组件，所以需要定义一个状态，用来存储编辑器的内容，并且通过onEditorStateChange动态改变该状态

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
// 定义状态
const [editorState, setEditorState] = useStart("")
<Editor
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  // 动态修改组件的状态
  onEditorStateChange={(val) => setEditorState(val)}
  // 将状态值绑定给该组件
  editorState={editorState}
/>;

我们这里拿到的状态对象editorState，它不是我们需要的数据类型，我们需要通过一些操作，将它转成可以存储到服务器的格式

HTML转化

转化成HTML的方式，就需要借助draftjs-to-html，所以我们需要先安装它

yarn add draftjs-to-html
or
npm i draftjs-to-html

代码

import React, { useState } from 'react'
import { Editor } from "react-draft-wysiwyg";
// 引入draft-js
import { convertToRaw, EditorState } from 'draft-js';
// 引入draft-to-html
import draftToHtml from 'draftjs-to-html';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const AEditor = () => {
	// 定义状态默认值的时候，需要设置为以下默认值
    const [editorState, setEditorState] = useState(EditorState.createEmpty())
    return (
        <>
            <Editor
                editorState={editorState}
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={(val) => setEditorState(val)}
                // 失去焦点之后，就能够获取到转化成HTML的数据
                onBlur={() => draftToHtml(convertToRaw(editorState.getCurrentContent()))}
            />
        </>
    )
}
export default AEditor