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>
        );
    }
}
相关推荐
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript