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>
        );
    }
}
相关推荐
半夏陌离2 分钟前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰4 分钟前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二14 分钟前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw21 分钟前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw23 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖26 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi1 小时前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang2 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
程序员码歌2 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架