react 富文本编辑器react-draft-wysiwyg 的使用总结

最新推荐文章于 2024-08-20 10:20:16 发布

wandoumm

最新推荐文章于 2024-08-20 10:20:16 发布

阅读量274

点赞数 1

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/wandoumm/article/details/80193339

版权

安装相关依赖

npm install react-draft-wysiwyg
npm install draft-js
npm install draftjs-to-html
npm install html-to-draftjs

import React, { useEffect, useState } from 'react'

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

import { Editor } from 'react-draft-wysiwyg';

import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default function Userstati() {


  const [editorState, setEditorState] = useState(EditorState.createEmpty())
  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState)
  }
  const getRichText = () => {
    const htmlStr = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    )

    console.log(htmlStr)
    return htmlStr

  }
  useEffect(()=>{
    const html =