使用 draftjs 创建 React 富文本编辑器

原创

已于 2022-03-31 17:09:02 修改 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2022-03-28 17:18:46 首次发布

参考网页：

https://blog.logrocket.com/building-rich-text-editors-in-react-using-draft-js-and-react-draft-wysiwyg/
https://stackoverflow.com/questions/55417190/issue-in-showing-file-upload-for-image-in-draft-js
https://nicedoc.io/jpuri/draftjs-to-html#user-content-supported-conversions

首先安装若干依赖包：

npm i draft-js react-draft-wysiwyg dompurify draftjs-to-html

最终代码如下(App.js)：

import React, {
   
    useState } from "react";
import {
   
    EditorState, convertToRaw } from "draft-js";
import {
   
    Editor } from "react-draft-wysiwyg";
import DOMPurify from "dompurify";
import draftToHtml from "draftjs-to-html";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import "./App.css";
const App = () => {
   
   
  const [editorState, setEditorState] = useState(EditorState.createEmpty()