1

我有一个使用 react-draft-wysiwyg 创建的文本编辑器。我创建了一个自定义块渲染功能，可以添加自定义块。

编辑器代码：

<Editor
    blockRenderMap={extendedBlockRenderMap}
    blockRendererFn={blockRendererFn}
    editorState={this.state.editorState}
    onEditorStateChange={this.onEditorStateChange}
    toolbarCustomButtons={[<FileAttachmentButton onAddFile={this.onAddFile} />]}
    toolbar={{
        options: ['inline', 'fontSize', 'fontFamily',
             'list', 'textAlign', 'colorPicker',
             'link', 'image'],
        link:{
            defaultTargetOption:'_blank',
            showOpenOptionOnHover:true
        },
        image:{
            urlEnabled: true,
            uploadEnabled:true,
            uploadCallback:this.uploadImageCallBack,
            alignmentEnabled: true,
            defaultSize: {
                height: 'auto',
                width: 'auto',
            }
        }
    }}
/>

渲染图

const RenderMap = new Map({
  FileAttachment: {
    element: 'div'
  }
}).merge(DefaultDraftBlockRenderMap);
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(RenderMap);

块渲染功能

function blockRendererFn(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'FileAttachment') {
    return {
      component: FileAttachment,
      editable: false,
      props: {}
    };
  }
}

图片回调函数

uploadImageCallBack(file){
    let uploadedImages = this.state.uploadedImages;
    const imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    }
    uploadedImages.push(imageObject);
    this.setState({uploadedImages: uploadedImages})
    return new Promise(
      (resolve, reject) => {
        resolve({ data: { link: imageObject.localSrc } });
      }
    )
}

自定义块渲染按我的预期工作。但是当我包含自定义块渲染时，上传图像功能无法正常工作。添加的图像不是内联添加的。

当我尝试添加 Image 时，我将 atomic 和 FileAttachment 作为 contentBlock 类型，这可能会限制图像内置功能。当我检查编辑器的内容时​​，有图形标签，但图形标签上没有附加 img 标签

有人可以帮我找出解决方案吗？

4

0 回答 0