我有一个使用react-draft-wysiwyg创建的文本编辑器 . 我创建了一个自定义blockrendering函数，可以添加自定义块 .
编辑代码：
<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 } });
}
)
}
自定义块渲染按预期工作 . 但是当我包含自定义块渲染上传图像功能时，它无法正常工作 . 添加的图像未添加内联 .
当我尝试添加Image时，我将原子和FileAttachment作为contentBlock类型，这可能会限制图像内置功能 . 当我检查编辑器的内容时，有图标，但图标标签上没有附加img标签
有人可以帮我找出解决方案吗？