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
    }
  }

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

css 复制代码
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>
        );
    }
}
相关推荐
前端进阶者5 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享14 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享14 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海18 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子29 分钟前
深入理解TCP协议
前端·javascript·面试
万少30 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css