react-draft-wysiwyg富文本编辑器使用常见问题解答

记录一些常见的问题以及使用

1. 初始化赋值

 import htmlToDraft from 'html-to-draftjs'
import { ContentState as DraftContentState } from 'draft-js'
import { EditorState,, convertToRaw } from 'draft-js'

  const { initialContent } = props

  useEffect(() => {
    if (initialContent) {
      try {
        const contentBlock = htmlToDraft(initialContent)
        if (contentBlock) {
          const contentState = DraftContentState.createFromBlockArray(
            contentBlock.contentBlocks
          )
          setEditorState(EditorState.createWithContent(contentState))

          // Convert ContentState to RawDraftContentState
          const rawContentState = convertToRaw(contentState)
          console.log('RawDraftContentState:', rawContentState)
        }
      } catch (error) {
        console.error('Error parsing HTML content:', error)
      }
    }
  }, [initialContent])

2.上传图片后,未直接插入富文本的问题解决
上传图片

  // 定义处理上传图片的回调函数
  const handleImageUpload = async (file) => {
    try {
      // 将图片上传到服务器
      const formData = new FormData()
      formData.append('images', file)
      const response = await fetch('接口地址', {
        method: 'POST',
        body: formData
      })
      const data = await response.json()
      //读取图片的 URL 
      return {
        data: {
          link:
            `接口地址?imagePath=` +
            data.data
        }
      }
    } catch (error) {
      console.error('Error uploading image:', error)
      throw error
    }
  }

未直接插入富文本编辑器的问题解决

Editor的toolbar需要添加

 previewImage: true,
 inputAccept: 'image/*'

完整toolbar

toolbar={{
        image: {
          urlEnabled: true,
          uploadEnabled: true,
          alignmentEnabled: true, // 是否显示排列按钮 相当于text-align
          uploadCallback: handleImageUpload, // 设置上传图片的回调函数
          previewImage: true,
          inputAccept: 'image/*'
        },
        fontFamily: {
          options: [
            '宋体',
            '黑体',
            '楷体',
            '微软雅黑',
            'Arial',
            'Georgia',
            'Impact',
            'Tahoma',
            'Times New Roman',
            'Verdana'
          ]
        }
      }}



3.富文本插入图片后无法输入中文的问题解决

Editor添加属性 customBlockRenderFunc={myBlockRenderer}


import React, { Component } from 'react';

export const myBlockRenderer = contentBlock => {
    const type = contentBlock.getType();

    // 图片类型转换为mediaComponent
    if (type === 'atomic') {
        return {
            component: Media,
            editable: false,
            props: {
                foo: 'bar',
            },
        };
    }
};

class Media extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        const { block, contentState } = this.props;
        console.log(this.props);
        const data = contentState.getEntity(block.getEntityAt(0)).getData();
        const emptyHtml = ' ';
        return (
            <div>
                {emptyHtml}
                <img
                    src={data.src}
                    alt={data.alt || ''}
                />
            </div>
        );
    }
}




  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用React Hooks和Antd的Form组件进行表单校,并且配合React-Draft-Wysig文本框时,输入内容提示立即消失的问题可以通过以下方式解决: 首先,确已经安装了相关的依赖包: ` npm install antd react-draft-wysiwy draft-js ``` 然后,创建一个新的组件,命名为DemoForm: ``` import React, { useState } from ''; import { Form, Input, Button } fromantd'; import { EditorState, ContentState from 'draft-js'; import { } from 'react-draft-wysiwyg'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; const DemoForm = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); const [form] = Form.useForm(); const handleFormSubmit = (values) => { console.log(values); }; const handleEditorChange = (state) => { setEditorState(state); }; return ( <Form form={form} onFinish={handleFormSubmit}> <Form.Item name="content" rules={[ { required: true, message: '请输入内容', }, ]} > <Editor editorState={editorState} onEditorStateChange={handleEditorChange} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default DemoForm; ``` 在上面的代码中,我们使用useState钩子来管理文本框的编辑状态(editorState)和Form组件的表单状态(form)。onEditorStateChange函数用于更新编辑状态,handleFormSubmit函数用于处理表单提交。 在Form.Item组件中,我们使用了rules属性来进行表单校验。在这个例子中,我们要求content字段是必填的,如果没有输入内容,会显示"请输入内容"的错误提示。 最后,通过使用Editor组件来展示文本框,并且将editorState和handleEditorChange函数传递给它。 这样,在输入内容时,如果没有满足校验规则,会显示错误提示,直到满足规则或者手动清空输入内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值