react-draft-wysiwyg的使用


一、React Draft Wysiwyg是什么?

是使用 ReactJSDraftJS库构建的 富文本编辑器

二、在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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值