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>
        );
    }
}
相关推荐
风无雨13 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl18 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js