Question

我有一个使用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',
            }
        }
    }}
/>

RenderMap

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

BlockRendering函数

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

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

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

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

当在React-draft-wyswyg中还添加了自定义块渲染时，上传的图像未在文本编辑器中作为内联添加

0 个答案: